Bootstrap a Vue 3 application using create-vue:
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
.
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.
Replace the content of App.vue
with the following code:
// 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:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Replace the content of tailwind.config.js
by:
// 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:
@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.
Note: In order to Mercure to work with the demo, you have to use the port 3000.
Made with love by
Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.
Learn more