Vue.js Generator

Bootstrap a Vue 3 application using create-vue:

create-vue を使用して Vue 3 アプリケーションをブートストラップします。

npm init vue@latest -- --typescript --router --pinia --eslint-with-prettier my-app
cd my-app

Install the required dependencies:

必要な依存関係をインストールします。

npm install dayjs qs @types/qs

To generate all the code you need for a given resource run the following command:

特定のリソースに必要なすべてのコードを生成するには、次のコマンドを実行します。

npm init @api-platform/client https://demo.api-platform.com src/ -- --generator vue --resource book

Replace the URL with the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with https://demo.api-platform.com/docs.json and -f openapi3.

URL を Hydra 対応 API のエントリポイントに置き換えます。https://demo.api-platform.com/docs.json および -f openapi3 を使用して OpenAPI ドキュメントを使用することもできます。

Omit the resource flag to generate files for all resource types exposed by the API.

API によって公開されるすべてのリソース タイプのファイルを生成するには、リソース フラグを省略します。

Note: Make sure to follow the result indications of the command to register the routes.

注: コマンドの結果表示に従って、ルートを登録してください。

Replace the content of App.vue with the following code:

App.vue の内容を次のコードに置き換えます。

// src/App.vue
<template>
  <RouterView />
</template>

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>

Optionally, install Tailwind to get an app that looks good:

必要に応じて、Tailwind をインストールして、見栄えの良いアプリを取得します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Replace the content of tailwind.config.js by:

tailwind.config.js の内容を次のように置き換えます。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Replace the content of src/assets/main.css by:

src/assets/main.css の内容を次のように置き換えます。

@tailwind base;
@tailwind components;
@tailwind utilities;

You can launch the server with:

次の方法でサーバーを起動できます。

npm run dev

Go to http://localhost:5173/books/ to start using your app.

http://localhost:5173/books/ に移動して、アプリの使用を開始します。

Note: In order to Mercure to work with the demo, you have to use the port 3000.

注: Mercure がデモを操作するには、ポート 3000 を使用する必要があります。