Vuetify Generator

Bootstrap a Vuetify 3 application using create-vuetify:

npm init vuetify -- --typescript --preset essentials
cd my-app

Install the required dependencies:

npm install dayjs qs @types/qs vue-i18n

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 vuetify --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.

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

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

Then add this import in src/plugins/vuetify.ts:

// src/plugins/vuetify.ts
import { VDataTableServer } from "vuetify/labs/VDataTable"

In the same file replace the export with:

// src/plugins/vuetify.ts
export default createVuetify({
  components: {
    VDataTableServer,
  },
});

In src/plugins/index.ts add this import:

// src/plugins/index.ts
import i18n from "@/plugins/i18n"

In the same file add .use(i18n) chained with the other use() functions.

You can launch the server with:

npm run dev

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

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