From 5e31799ee29dc0f8cb261f86ae39eb153ee85020 Mon Sep 17 00:00:00 2001
From: Valentin <valentin.crochemore@gmail.com>
Date: Wed, 25 Jan 2023 12:26:58 +0100
Subject: [PATCH] feat: migrate templates from Nuxt 2 to Nuxt 3 (#356)

---
 src/generators/NuxtGenerator.js               | 299 +++++++++++-------
 src/generators/NuxtGenerator.test.js          | 135 ++++----
 templates/common/tailwind.config.js           |   8 +-
 templates/common/types/collection.ts          |  16 +-
 templates/common/types/item.ts                |   2 +-
 templates/common/types/view.ts                |  10 +-
 templates/nuxt/components/ActionCell.vue      |  70 ----
 templates/nuxt/components/Alert.vue           |  42 ---
 templates/nuxt/components/ConfirmDelete.vue   |  45 ---
 templates/nuxt/components/DataFilter.vue      |  58 ----
 templates/nuxt/components/InputDate.vue       |  50 ---
 templates/nuxt/components/Loading.vue         |  18 --
 templates/nuxt/components/Toolbar.vue         | 123 -------
 .../nuxt/components/common/FormRepeater.vue   |  67 ++++
 templates/nuxt/components/foo/Filter.vue      | 136 --------
 templates/nuxt/components/foo/FooCreate.vue   |  52 +++
 templates/nuxt/components/foo/FooForm.vue     |  97 ++++++
 templates/nuxt/components/foo/FooList.vue     | 281 ++++++++++++++++
 templates/nuxt/components/foo/FooShow.vue     | 206 ++++++++++++
 templates/nuxt/components/foo/FooUpdate.vue   | 136 ++++++++
 templates/nuxt/components/foo/Form.vue        | 221 -------------
 templates/nuxt/composables/api.ts             | 181 +++++++++++
 templates/nuxt/mixins/create.js               |  39 ---
 templates/nuxt/mixins/list.js                 |  78 -----
 templates/nuxt/mixins/notification.js         |  37 ---
 templates/nuxt/mixins/show.js                 |  37 ---
 templates/nuxt/mixins/update.js               |  75 -----
 templates/nuxt/nuxt.config.ts                 |  21 ++
 templates/nuxt/pages/foos/[id]/edit.vue       |   9 +
 templates/nuxt/pages/foos/[id]/index.vue      |   9 +
 templates/nuxt/pages/foos/_id/edit.vue        |  66 ----
 templates/nuxt/pages/foos/_id/index.vue       |  77 -----
 templates/nuxt/pages/foos/create.vue          |  45 +--
 templates/nuxt/pages/foos/index.vue           | 181 +----------
 templates/nuxt/pages/foos/page/[page].vue     |   9 +
 templates/nuxt/pages/index.vue                |   5 +
 templates/nuxt/store/crud.js                  | 273 ----------------
 templates/nuxt/store/foo.js                   |   6 -
 templates/nuxt/store/notifications.js         |  18 --
 templates/nuxt/stores/foo/create.ts           |  48 +++
 templates/nuxt/stores/foo/delete.ts           |  36 +++
 templates/nuxt/stores/foo/list.ts             |  71 +++++
 templates/nuxt/stores/foo/show.ts             |  46 +++
 templates/nuxt/stores/foo/update.ts           |  75 +++++
 templates/nuxt/types/api.ts                   |  32 ++
 templates/nuxt/utils/resource.ts              |  11 +
 .../components/common/CommonFormRepeater.vue  |   2 +-
 templates/quasar/components/foo/FooForm.vue   |   2 +-
 .../vue/components/common/FormRepeater.vue    |   2 +-
 testapp.sh                                    |  22 +-
 tests/show.spec.ts                            |   2 +
 51 files changed, 1701 insertions(+), 1886 deletions(-)
 delete mode 100644 templates/nuxt/components/ActionCell.vue
 delete mode 100644 templates/nuxt/components/Alert.vue
 delete mode 100644 templates/nuxt/components/ConfirmDelete.vue
 delete mode 100644 templates/nuxt/components/DataFilter.vue
 delete mode 100644 templates/nuxt/components/InputDate.vue
 delete mode 100644 templates/nuxt/components/Loading.vue
 delete mode 100644 templates/nuxt/components/Toolbar.vue
 create mode 100644 templates/nuxt/components/common/FormRepeater.vue
 delete mode 100644 templates/nuxt/components/foo/Filter.vue
 create mode 100644 templates/nuxt/components/foo/FooCreate.vue
 create mode 100644 templates/nuxt/components/foo/FooForm.vue
 create mode 100644 templates/nuxt/components/foo/FooList.vue
 create mode 100644 templates/nuxt/components/foo/FooShow.vue
 create mode 100644 templates/nuxt/components/foo/FooUpdate.vue
 delete mode 100644 templates/nuxt/components/foo/Form.vue
 create mode 100644 templates/nuxt/composables/api.ts
 delete mode 100644 templates/nuxt/mixins/create.js
 delete mode 100644 templates/nuxt/mixins/list.js
 delete mode 100644 templates/nuxt/mixins/notification.js
 delete mode 100644 templates/nuxt/mixins/show.js
 delete mode 100644 templates/nuxt/mixins/update.js
 create mode 100644 templates/nuxt/nuxt.config.ts
 create mode 100644 templates/nuxt/pages/foos/[id]/edit.vue
 create mode 100644 templates/nuxt/pages/foos/[id]/index.vue
 delete mode 100644 templates/nuxt/pages/foos/_id/edit.vue
 delete mode 100644 templates/nuxt/pages/foos/_id/index.vue
 create mode 100644 templates/nuxt/pages/foos/page/[page].vue
 create mode 100644 templates/nuxt/pages/index.vue
 delete mode 100644 templates/nuxt/store/crud.js
 delete mode 100644 templates/nuxt/store/foo.js
 delete mode 100644 templates/nuxt/store/notifications.js
 create mode 100644 templates/nuxt/stores/foo/create.ts
 create mode 100644 templates/nuxt/stores/foo/delete.ts
 create mode 100644 templates/nuxt/stores/foo/list.ts
 create mode 100644 templates/nuxt/stores/foo/show.ts
 create mode 100644 templates/nuxt/stores/foo/update.ts
 create mode 100644 templates/nuxt/types/api.ts
 create mode 100644 templates/nuxt/utils/resource.ts

diff --git a/src/generators/NuxtGenerator.js b/src/generators/NuxtGenerator.js
index e2096df1..b8d64fd6 100644
--- a/src/generators/NuxtGenerator.js
+++ b/src/generators/NuxtGenerator.js
@@ -1,40 +1,74 @@
+import handlebars from "handlebars";
+import hbh_comparison from "handlebars-helpers/lib/comparison.js";
+import hbh_array from "handlebars-helpers/lib/array.js";
+import hbh_string from "handlebars-helpers/lib/string.js";
 import chalk from "chalk";
-import BaseVueGenerator from "./VueBaseGenerator.js";
+import BaseGenerator from "./BaseGenerator.js";
 
-export default class NuxtGenerator extends BaseVueGenerator {
+export default class NuxtGenerator extends BaseGenerator {
   constructor(params) {
     super(params);
 
+    this.registerTemplates("common/", [
+      // types
+      "types/collection.ts",
+      "types/error.ts",
+      "types/foo.ts",
+      "types/item.ts",
+      "types/view.ts",
+
+      // utils
+      "utils/config.ts",
+      "utils/date.ts",
+      "utils/error.ts",
+      "utils/mercure.ts",
+    ]);
+
+    this.registerTemplates("vue-common/", [
+      // composables
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+    ]);
+
     this.registerTemplates(`nuxt/`, [
+      // common components
+      "components/common/FormRepeater.vue",
+
       // components
-      "components/ActionCell.vue",
-      "components/Alert.vue",
-      "components/ConfirmDelete.vue",
-      "components/DataFilter.vue",
-      "components/InputDate.vue",
-      "components/Loading.vue",
-      "components/Toolbar.vue",
-      "components/foo/Filter.vue",
-      "components/foo/Form.vue",
-
-      // mixins
-      "mixins/create.js",
-      "mixins/list.js",
-      "mixins/notification.js",
-      "mixins/show.js",
-      "mixins/update.js",
+      "components/foo/FooCreate.vue",
+      "components/foo/FooForm.vue",
+      "components/foo/FooList.vue",
+      "components/foo/FooShow.vue",
+      "components/foo/FooUpdate.vue",
+
+      // composables
+      "composables/api.ts",
 
       // pages
+      "pages/index.vue",
       "pages/foos/create.vue",
       "pages/foos/index.vue",
-      "pages/foos/_id/edit.vue",
-      "pages/foos/_id/index.vue",
-
-      // store
-      "store/crud.js",
-      "store/notifications.js",
-      "store/foo.js",
+      "pages/foos/[id]/edit.vue",
+      "pages/foos/[id]/index.vue",
+      "pages/foos/page/[page].vue",
+
+      // stores
+      "stores/foo/create.ts",
+      "stores/foo/delete.ts",
+      "stores/foo/list.ts",
+      "stores/foo/show.ts",
+      "stores/foo/update.ts",
+
+      // types
+      "types/api.ts",
+
+      // utils
+      "utils/resource.ts",
     ]);
+
+    handlebars.registerHelper("compare", hbh_comparison.compare);
+    handlebars.registerHelper("forEach", hbh_array.forEach);
+    handlebars.registerHelper("lowercase", hbh_string.lowercase);
   }
 
   help(resource) {
@@ -44,115 +78,144 @@ export default class NuxtGenerator extends BaseVueGenerator {
     );
   }
 
-  generateFiles(api, resource, dir, params) {
-    const context = super.getContextForResource(resource, params);
-    const lc = context.lc;
-
-    [
-      `${dir}/config`,
-      `${dir}/error`,
-      `${dir}/mixins`,
-      `${dir}/services`,
-      `${dir}/store`,
-      `${dir}/utils`,
-      `${dir}/validators`,
-    ].forEach((dir) => this.createDir(dir, false));
-
-    // error
-    this.createFile(
-      "error/SubmissionError.js",
-      `${dir}/error/SubmissionError.js`,
-      {},
-      false
-    );
-
-    // mixins
-    [
-      "mixins/create.js",
-      "mixins/list.js",
-      "mixins/notification.js",
-      "mixins/show.js",
-      "mixins/update.js",
-    ].forEach((file) =>
-      this.createFile(file, `${dir}/${file}`, context, false)
-    );
-
-    // stores
-    this.createFile(
-      `store/modules/notifications.js`,
-      `${dir}/store/notifications.js`,
-      { hydraPrefix: this.hydraPrefix },
-      false
-    );
-
-    this.createFile(
-      `store/crud.js`,
-      `${dir}/store/crud.js`,
-      { hydraPrefix: this.hydraPrefix },
-      false
-    );
-
-    // validators
-    this.createFile(
-      "validators/date.js",
-      `${dir}/validators/date.js`,
-      { hydraPrefix: this.hydraPrefix },
-      false
-    );
-
-    // utils
-    ["dates.js", "fetch.js", "hydra.js"].forEach((file) =>
-      this.createFile(`utils/${file}`, `${dir}/utils/${file}`, {}, false)
-    );
+  getContextForResource(resource) {
+    const lc = resource.title.toLowerCase();
+    const titleUcFirst =
+      resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
+    const fields = this.parseFields(resource);
+    const hasIsRelation = fields.some((field) => field.isRelation);
+    const hasIsRelations = fields.some((field) => field.isRelations);
+    const hasRelations = hasIsRelation || hasIsRelations;
+
+    const formFields = this.buildFields(fields);
+
+    return {
+      title: resource.title,
+      name: resource.name,
+      lc,
+      uc: resource.title.toUpperCase(),
+      fields,
+      hasIsRelation,
+      hasIsRelations,
+      hasRelations,
+      formFields,
+      hydraPrefix: this.hydraPrefix,
+      titleUcFirst,
+    };
+  }
 
-    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
+  generate(api, resource, dir) {
+    const context = this.getContextForResource(resource);
+    const { lc, titleUcFirst } = context;
 
     [
+      `${dir}/assets`,
+      `${dir}/assets/css`,
+      `${dir}/components`,
+      `${dir}/components/common`,
       `${dir}/components/${lc}`,
+      `${dir}/composables`,
+      `${dir}/pages`,
       `${dir}/pages/${lc}s`,
-      `${dir}/pages/${lc}s/_id`,
-    ].forEach((dir) => {
-      this.createDir(dir);
-    });
-
-    this.createFile("services/api.js", `${dir}/services/api.js`, {}, false);
+      `${dir}/pages/${lc}s/[id]`,
+      `${dir}/pages/${lc}s/page`,
+      `${dir}/stores`,
+      `${dir}/stores/${lc}`,
+      `${dir}/types`,
+      `${dir}/utils`,
+    ].forEach((dir) => this.createDir(dir, false));
 
     [
       // components
-      "components/%s/Filter.vue",
-      "components/%s/Form.vue",
+      "components/%s/%sCreate.vue",
+      "components/%s/%sForm.vue",
+      "components/%s/%sList.vue",
+      "components/%s/%sShow.vue",
+      "components/%s/%sUpdate.vue",
 
       // pages
       "pages/%ss/create.vue",
       "pages/%ss/index.vue",
-      "pages/%ss/_id/edit.vue",
-      "pages/%ss/_id/index.vue",
-
-      // service
-      "services/%s.js",
-
-      // store
-      "store/%s.js",
+      "pages/%ss/[id]/edit.vue",
+      "pages/%ss/[id]/index.vue",
+      "pages/%ss/page/[page].vue",
+
+      // stores
+      "stores/%s/create.ts",
+      "stores/%s/delete.ts",
+      "stores/%s/list.ts",
+      "stores/%s/show.ts",
+      "stores/%s/update.ts",
+
+      // types
+      "types/%s.ts",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, [lc], context)
+      this.createFileFromPattern(pattern, dir, [lc, titleUcFirst], context)
     );
 
-    // components
     [
-      "ActionCell.vue",
-      "Alert.vue",
-      "ConfirmDelete.vue",
-      "DataFilter.vue",
-      "InputDate.vue",
-      "Loading.vue",
-      "Toolbar.vue",
-    ].forEach((file) =>
-      this.createFile(
-        `components/${file}`,
-        `${dir}/components/${file}`,
-        context,
-        false
-      )
+      // components
+      "components/common/FormRepeater.vue",
+
+      // composables
+      "composables/api.ts",
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+
+      // pages
+      "pages/index.vue",
+
+      // types
+      "types/api.ts",
+      "types/collection.ts",
+      "types/error.ts",
+      "types/item.ts",
+      "types/view.ts",
+
+      // utils
+      "utils/date.ts",
+      "utils/error.ts",
+      "utils/mercure.ts",
+
+      // utils
+      "utils/resource.ts",
+    ].forEach((path) =>
+      this.createFile(path, `${dir}/${path}`, context, false)
     );
+
+    // config
+    this.createConfigFile(`${dir}/utils/config.ts`, {
+      entrypoint: api.entrypoint,
+    });
+  }
+
+  parseFields(resource) {
+    const fields = [
+      ...resource.writableFields,
+      ...resource.readableFields,
+    ].reduce((list, field) => {
+      if (list[field.name]) {
+        return list;
+      }
+
+      const isReferences = Boolean(
+        field.reference && field.maxCardinality !== 1
+      );
+      const isEmbeddeds = Boolean(field.embedded && field.maxCardinality !== 1);
+
+      return {
+        ...list,
+        [field.name]: {
+          ...field,
+          readonly: false,
+          isReferences,
+          isEmbeddeds,
+          isRelation: field.reference || field.embedded,
+          isRelations: isEmbeddeds || isReferences,
+        },
+      };
+    }, {});
+
+    return Object.values(fields);
   }
 }
diff --git a/src/generators/NuxtGenerator.test.js b/src/generators/NuxtGenerator.test.js
index 8fb84b56..496dc66b 100644
--- a/src/generators/NuxtGenerator.test.js
+++ b/src/generators/NuxtGenerator.test.js
@@ -7,68 +7,85 @@ import NuxtGenerator from "./NuxtGenerator.js";
 
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const generator = new NuxtGenerator({
-  hydraPrefix: "hydra:",
-  templateDirectory: `${dirname}/../../templates`,
-});
+test("Generate a Nuxt app", () => {
+  const generator = new NuxtGenerator({
+    hydraPrefix: "hydra:",
+    templateDirectory: `${dirname}/../../templates`,
+  });
+  const tmpobj = tmp.dirSync({ unsafeCleanup: true });
 
-afterEach(() => {
-  jest.resetAllMocks();
-});
+  const fields = [
+    new Field("bar", {
+      id: "http://schema.org/url",
+      range: "http://www.w3.org/2001/XMLSchema#string",
+      reference: null,
+      required: true,
+      description: "An URL",
+      type: "string",
+    }),
+  ];
+  const resource = new Resource("abc", "http://example.com/foos", {
+    id: "foo",
+    title: "Foo",
+    readableFields: fields,
+    writableFields: fields,
+  });
+  const api = new Api("http://example.com", {
+    entrypoint: "http://example.com:8080",
+    title: "My API",
+    resources: [resource],
+  });
 
-describe("generate", () => {
-  test("Generate a Nuxt app", () => {
-    const tmpobj = tmp.dirSync({ unsafeCleanup: true });
+  generator.generate(api, resource, tmpobj.name);
 
-    const fields = [
-      new Field("bar", {
-        id: "http://schema.org/url",
-        range: "http://www.w3.org/2001/XMLSchema#string",
-        reference: null,
-        required: true,
-        description: "An URL",
-      }),
-    ];
-    const resource = new Resource("prefix/aBe_cd", "http://example.com/foos", {
-      id: "foo",
-      title: "Foo",
-      readableFields: fields,
-      writableFields: fields,
-      getParameters: function getParameters() {
-        return Promise.resolve([]);
-      },
-    });
-    const api = new Api("http://example.com", {
-      entrypoint: "http://example.com:8080",
-      title: "My API",
-      resources: [resource],
-    });
+  // common components
+  expect(
+    fs.existsSync(`${tmpobj.name}/components/common/FormRepeater.vue`)
+  ).toBe(true);
 
-    generator.generate(api, resource, tmpobj.name).then(() => {
-      [
-        "/components/foo/Form.vue",
-        "/components/InputDate.vue",
-        "/components/Loading.vue",
-        "/components/Alert.vue",
-        "/components/Toolbar.vue",
-        "/config/entrypoint.js",
-        "/error/SubmissionError.js",
-        "/services/api.js",
-        "/services/foo.js",
-        "/store/foo.js",
-        "/store/notifications.js",
-        "/utils/dates.js",
-        "/utils/fetch.js",
-        "/utils/hydra.js",
-        "/pages/foos/_id/edit.vue",
-        "/pages/foos/_id/index.vue",
-        "/pages/foos/index.vue",
-        "/pages/foos/create.vue",
-      ].forEach((file) => {
-        expect(fs.existsSync(tmpobj.name + file)).toBe(true);
-      });
+  // components
+  expect(fs.existsSync(`${tmpobj.name}/components/foo/FooCreate.vue`)).toBe(
+    true
+  );
+  expect(fs.existsSync(`${tmpobj.name}/components/foo/FooForm.vue`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/components/foo/FooList.vue`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/components/foo/FooShow.vue`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/components/foo/FooUpdate.vue`)).toBe(
+    true
+  );
 
-      tmpobj.removeCallback();
-    });
-  });
+  // composables
+  expect(fs.existsSync(`${tmpobj.name}/composables/api.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/composables/mercureItem.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/composables/mercureList.ts`)).toBe(true);
+
+  // pages
+  expect(fs.existsSync(`${tmpobj.name}/pages/foos/[id]/edit.vue`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/pages/foos/[id]/index.vue`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/pages/foos/create.vue`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/pages/foos/index.vue`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/pages/index.vue`)).toBe(true);
+
+  // stores
+  expect(fs.existsSync(`${tmpobj.name}/stores/foo/create.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/stores/foo/delete.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/stores/foo/list.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/stores/foo/show.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/stores/foo/update.ts`)).toBe(true);
+
+  // types
+  expect(fs.existsSync(`${tmpobj.name}/types/api.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/types/collection.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/types/error.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/types/foo.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/types/item.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/types/view.ts`)).toBe(true);
+
+  // utils
+  expect(fs.existsSync(`${tmpobj.name}/utils/config.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/date.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/error.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/mercure.ts`)).toBe(true);
+
+  tmpobj.removeCallback();
 });
diff --git a/templates/common/tailwind.config.js b/templates/common/tailwind.config.js
index b523189e..5035b7a9 100644
--- a/templates/common/tailwind.config.js
+++ b/templates/common/tailwind.config.js
@@ -7,9 +7,15 @@ module.exports = {
     // Vue
     "./index.html",
     "./src/**/*.{vue,ts}",
+    // Nuxt
+    "./components/**/*.{vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.ts",
+    "./nuxt.config.ts",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};
diff --git a/templates/common/types/collection.ts b/templates/common/types/collection.ts
index f710e6fd..b5245962 100644
--- a/templates/common/types/collection.ts
+++ b/templates/common/types/collection.ts
@@ -1,11 +1,11 @@
-import type { View } from './view';
+import type { View } from "./view";
 
 export interface PagedCollection<T> {
-  '@context'?: string;
-  '@id'?: string;
-  '@type'?: string;
-  '{{hydraPrefix}}member': T[];
-  '{{hydraPrefix}}search'?: object;
-  '{{hydraPrefix}}totalItems'?: number;
-  '{{hydraPrefix}}view': View;
+  "@context"?: string;
+  "@id"?: string;
+  "@type"?: string;
+  "{{hydraPrefix}}member": T[];
+  "{{hydraPrefix}}search"?: object;
+  "{{hydraPrefix}}totalItems"?: number;
+  "{{hydraPrefix}}view": View;
 }
diff --git a/templates/common/types/item.ts b/templates/common/types/item.ts
index 766cc0f1..f8d95cdc 100644
--- a/templates/common/types/item.ts
+++ b/templates/common/types/item.ts
@@ -1,3 +1,3 @@
 export interface Item {
-  '@id'?: string;
+  "@id"?: string;
 }
diff --git a/templates/common/types/view.ts b/templates/common/types/view.ts
index 19cd75d1..9a6bb10a 100644
--- a/templates/common/types/view.ts
+++ b/templates/common/types/view.ts
@@ -1,7 +1,7 @@
 export interface View {
-  '@id': string;
-  '{{hydraPrefix}}first': string;
-  '{{hydraPrefix}}last': string;
-  '{{hydraPrefix}}next': string;
-  '{{hydraPrefix}}previous': string;
+  "@id": string;
+  "{{hydraPrefix}}first": string;
+  "{{hydraPrefix}}last": string;
+  "{{hydraPrefix}}next": string;
+  "{{hydraPrefix}}previous": string;
 }
diff --git a/templates/nuxt/components/ActionCell.vue b/templates/nuxt/components/ActionCell.vue
deleted file mode 100644
index 289c3a01..00000000
--- a/templates/nuxt/components/ActionCell.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div>
-    <v-row justify="space-around">
-      <v-btn
-        v-if="showHref"
-        color="primary"
-        dark
-        small
-        class="mr-2"
-        :href="showHref"
-      >
-        Show <v-icon dark>mdi-eye</v-icon>
-      </v-btn>
-      <v-btn
-        v-if="editHref"
-        color="primary"
-        dark
-        small
-        class="mr-2"
-        :href="editHref"
-      >
-        Edit <v-icon dark>mdi-pencil</v-icon>
-      </v-btn>
-      <v-btn
-        v-if="handleDelete"
-        color="primary"
-        dark
-        small
-        class="mr-2"
-        @click="handleDelete"
-      >
-        Delete <v-icon dark>mdi-delete</v-icon>
-      </v-btn>
-    </v-row>
-    <ConfirmDelete
-      v-if="handleDelete"
-      :visible="confirmDelete"
-      :handle-delete="handleDelete"
-      @close="confirmDelete = false"
-    />
-  </div>
-</template>
-
-<script>
-import ConfirmDelete from './ConfirmDelete';
-
-export default {
-  name: 'ActionCell',
-  components: {
-    ConfirmDelete
-  },
-  data: () => ({
-    confirmDelete: false
-  }),
-  props: {
-    showHref: {
-      type: String,
-      required: false
-    },
-    editHref: {
-      type: String,
-      required: false
-    },
-    handleDelete: {
-      type: Function,
-      required: false
-    }
-  }
-};
-</script>
diff --git a/templates/nuxt/components/Alert.vue b/templates/nuxt/components/Alert.vue
deleted file mode 100644
index 3e9c8ea8..00000000
--- a/templates/nuxt/components/Alert.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <v-snackbar
-    v-model="show"
-    :color="color"
-    :multi-line="true"
-    :timeout="timeout"
-    right
-    top
-  >
-    \{{ text }}
-    <template v-if="subText">
-      <p>\{{ subText }}</p>
-    </template>
-
-    <template v-slot:action="{ attrs }">
-      <v-btn
-        dark
-        text
-        v-bind="attrs"
-        @click="show = false"
-      >
-        Close
-      </v-btn>
-    </template>
-  </v-snackbar>
-</template>
-
-<script>
-import { mapFields } from 'vuex-map-fields';
-
-export default {
-  computed: {
-    ...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout'])
-  },
-
-  methods: {
-    close() {
-      this.show = false;
-    }
-  }
-};
-</script>
diff --git a/templates/nuxt/components/ConfirmDelete.vue b/templates/nuxt/components/ConfirmDelete.vue
deleted file mode 100644
index ca2038c1..00000000
--- a/templates/nuxt/components/ConfirmDelete.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <v-dialog v-model="show" persistent width="300">
-    <v-card>
-      <v-card-text>Are you sure you want to delete this item?</v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="error darken-1" @click="handleDelete">
-          Delete
-        </v-btn>
-        <v-btn color="secondary darken-1" text @click.stop="show = false">
-          Cancel
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-export default {
-  name: 'ConfirmDelete',
-  props: {
-    visible: {
-      type: Boolean,
-      required: true,
-      default: () => false
-    },
-    handleDelete: {
-      type: Function,
-      required: true
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.visible;
-      },
-      set(value) {
-        if (!value) {
-          this.$emit('close');
-        }
-      }
-    }
-  }
-};
-</script>
diff --git a/templates/nuxt/components/DataFilter.vue b/templates/nuxt/components/DataFilter.vue
deleted file mode 100644
index 12041848..00000000
--- a/templates/nuxt/components/DataFilter.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <v-menu
-    transition="slide-y-transition"
-    :close-on-content-click="false"
-    offset-y
-  >
-    <template v-slot:activator="{ on, attrs }">
-      <v-btn
-        color="white"
-        v-on="on"
-        v-bind="attrs"
-      >
-        Filter <v-icon right>mdi-filter-variant</v-icon>
-      </v-btn>
-    </template>
-
-    <v-sheet>
-      <v-card-title>Filters</v-card-title>
-
-      <slot name="filter"></slot>
-
-      <v-card-actions>
-        <v-spacer />
-
-        <v-btn color="primary" @click="onFilter">
-          Filter
-        </v-btn>
-        <v-btn color="primary" class="ml-2" text @click="onCancel">
-          Cancel
-        </v-btn>
-      </v-card-actions>
-    </v-sheet>
-  </v-menu>
-</template>
-
-<script>
-  export default {
-    name: 'DataFilter',
-    props: {
-      handleReset: {
-        type: Function,
-        required: true
-      },
-      handleFilter: {
-        type: Function,
-        required: true
-      }
-    },
-    methods: {
-      onFilter() {
-        this.handleFilter()
-      },
-      onCancel() {
-        this.handleReset()
-      }
-    }
-  };
-</script>
diff --git a/templates/nuxt/components/InputDate.vue b/templates/nuxt/components/InputDate.vue
deleted file mode 100644
index 6fd0cc67..00000000
--- a/templates/nuxt/components/InputDate.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <v-menu
-    v-model="showMenu"
-    :close-on-content-click="false"
-    :nudge-right="40"
-    transition="scale-transition"
-    offset-y
-    min-width="290px"
-  >
-    <template v-slot:activator="{ on }">
-      <v-text-field
-        v-model="date"
-        :label="label"
-        prepend-icon="mdi-calendar"
-        readonly
-        v-on="on"
-      ></v-text-field>
-    </template>
-    <v-date-picker v-model="date" @input="handleInput"></v-date-picker>
-  </v-menu>
-</template>
-
-<script>
-import { formatDateTime } from '../utils/dates';
-
-export default {
-  props: {
-    label: {
-      type: String,
-      required: false,
-      default: () => ''
-    },
-    value: String
-  },
-  created() {
-    this.date = this.value || this.date;
-  },
-  data: () => ({
-    date: new Date().toISOString().substr(0, 10),
-    showMenu: false
-  }),
-  methods: {
-    formatDateTime,
-    handleInput() {
-      this.showMenu = false;
-      this.$emit('input', this.date);
-    }
-  }
-};
-</script>
diff --git a/templates/nuxt/components/Loading.vue b/templates/nuxt/components/Loading.vue
deleted file mode 100644
index bceef719..00000000
--- a/templates/nuxt/components/Loading.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-overlay :value="visible">
-      <v-progress-circular indeterminate size="64"></v-progress-circular>
-    </v-overlay>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    visible: {
-      type: Boolean,
-      required: true
-    }
-  }
-};
-</script>
diff --git a/templates/nuxt/components/Toolbar.vue b/templates/nuxt/components/Toolbar.vue
deleted file mode 100644
index 9c8d558b..00000000
--- a/templates/nuxt/components/Toolbar.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <v-toolbar class="my-md-auto" elevation="0">
-    <slot name="left"></slot>
-    <v-spacer />
-    <div>
-      <v-btn
-        v-if="editHref"
-        :loading="isLoading"
-        color="primary"
-        :href="editHref"
-      >
-        Edit
-      </v-btn>
-      <v-btn
-        v-if="listHref"
-        :loading="isLoading"
-        color="primary"
-        :href="listHref"
-      >
-        Back to list
-      </v-btn>
-      <v-btn
-        v-if="handleSubmit"
-        :loading="isLoading"
-        color="primary"
-        @click="submitItem"
-      >
-        Submit
-      </v-btn>
-      <v-btn
-        v-if="handleReset"
-        class="ml-sm-2"
-        @click="resetItem"
-      >
-        Reset
-      </v-btn>
-      <v-btn
-        v-if="handleDelete"
-        color="error"
-        class="ml-sm-2"
-        @click="confirmDelete = true"
-      >
-        Delete
-      </v-btn>
-
-      <v-btn v-if="handleAdd" color="primary" rounded @click="addItem">
-        <v-icon>mdi-plus-circle</v-icon>
-      </v-btn>
-    </div>
-    <ConfirmDelete
-      v-if="handleDelete"
-      :visible="confirmDelete"
-      :handle-delete="handleDelete"
-      @close="confirmDelete = false"
-    />
-  </v-toolbar>
-</template>
-
-<script>
-import ConfirmDelete from './ConfirmDelete';
-
-export default {
-  name: 'Toolbar',
-  components: {
-    ConfirmDelete
-  },
-  data: () => ({
-    confirmDelete: false
-  }),
-  props: {
-    editHref: {
-      type: String,
-      required: false
-    },
-    listHref: {
-      type: String,
-      required: false
-    },
-    handleSubmit: {
-      type: Function,
-      required: false
-    },
-    handleReset: {
-      type: Function,
-      required: false
-    },
-    handleDelete: {
-      type: Function,
-      required: false
-    },
-    handleAdd: {
-      type: Function,
-      required: false
-    },
-    title: {
-      type: String,
-      required: false
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: () => false
-    }
-  },
-  methods: {
-    addItem() {
-      if (this.handleAdd) {
-        this.handleAdd();
-      }
-    },
-    submitItem() {
-      if (this.handleSubmit) {
-        this.handleSubmit();
-      }
-    },
-    resetItem() {
-      if (this.handleReset) {
-        this.handleReset();
-      }
-    }
-  }
-};
-</script>
diff --git a/templates/nuxt/components/common/FormRepeater.vue b/templates/nuxt/components/common/FormRepeater.vue
new file mode 100644
index 00000000..2db8028f
--- /dev/null
+++ b/templates/nuxt/components/common/FormRepeater.vue
@@ -0,0 +1,67 @@
+<template>
+  <button
+    type="button"
+    class="my-2 px-6 py-2 border-2 border-green-500 text-green-500 text-xs rounded-full hover:text-white hover:bg-green-500"
+    @click="addField"
+  >
+    Add
+  </button>
+
+  <div v-for="(field, index) in fields" :key="index" class="flex gap-2 mb-3">
+    <input
+      v-model="fields[index]"
+      placeholder="Relation IRI"
+      class="grow px-3 py-1.5 border rounded"
+      @input="updateField(index, ($event?.target as HTMLInputElement)?.value)"
+    />
+
+    <button
+      type="button"
+      class="px-6 py-2 border-2 border-gray-800 font-medium text-xs uppercase rounded hover:text-white hover:bg-gray-800"
+      @click="removeField(index)"
+    >
+      Remove
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Ref } from "vue";
+
+const props = defineProps<{
+  values?: string[];
+}>();
+
+const emit = defineEmits<{
+  (e: "update", values: string[]): void;
+}>();
+
+let fields: Ref<string[]> = ref([]);
+
+if (props.values) {
+  fields.value.push(...props.values);
+}
+
+function addField() {
+  fields.value.push("");
+}
+
+function updateField(index: number, value: string) {
+  fields.value.splice(index, 1, value.trim());
+
+  emitUpdate();
+}
+
+function removeField(index: number) {
+  fields.value.splice(index, 1);
+
+  emitUpdate();
+}
+
+function emitUpdate() {
+  emit(
+    "update",
+    fields.value.filter((field) => field.length)
+  );
+}
+</script>
diff --git a/templates/nuxt/components/foo/Filter.vue b/templates/nuxt/components/foo/Filter.vue
deleted file mode 100644
index 8061e851..00000000
--- a/templates/nuxt/components/foo/Filter.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <v-container fluid>
-    {{#forEach parameters}}
-    {{#ifOdd index}}
-    <v-row>
-    {{/ifOdd}}
-    {{#compare type "==" "checkbox" }}
-      <v-col cols="12" sm="6" md="6">
-        <v-checkbox
-          v-model="item.{{{name}}}"
-          label="{{{name}}}"
-        />
-      </v-col>
-    {{/compare}}
-    {{#compare type "==" "date" }}
-      <v-col cols="12" sm="6" md="6">
-        <InputDate
-          v-model="item.{{{name}}}"
-          label="{{{name}}}"
-        />
-      </v-col>
-    {{/compare}}
-    {{#compare type "==" "time" }}
-      <v-col cols="12" sm="6" md="6">
-        <v-time-picker
-          v-model="item.{{{name}}}"
-          label="{{{name}}}"
-        />
-      </v-col>
-    {{/compare}}
-    {{#compare type "==" "dateTime" }}
-      <!-- todo : fix the dateTime format, not supported by default on vuetify -->
-      <v-col cols="12" sm="6" md="6">
-        <InputDate
-          v-model="item.{{{name}}}"
-          label="{{{name}}}"
-        />
-      </v-col>
-    {{/compare}}
-    {{#compare type "==" "number" }}
-      <v-col cols="12" sm="6" md="6">
-        <v-text-field
-          v-model.number="item.{{{name}}}"
-          label="{{{name}}}"
-        />
-      </v-col>
-    {{/compare}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-      <v-col cols="12" sm="6" md="6">
-        <v-combobox
-          v-model="item.{{{name}}}"
-          :items="{{{name}}}SelectItems"
-          no-data-text="{{{../labels.noresults}}}"
-          label="{{{name}}}"{{#unless maxCardinality}}
-          multiple{{/unless}}
-          item-text="name"
-          item-value="@id"
-          chips
-        />
-      </v-col>
-    {{else}}
-      <v-col cols="12" sm="6" md="6">
-        <v-text-field
-          v-model="item.{{{name}}}"
-          label="{{{name}}}"
-          type="{{{type}}}"
-        />
-      </v-col>
-    {{/if}}
-    {{/compare}}
-    {{#ifEven index}}
-    </v-row>
-    {{/ifEven}}
-    {{#if isLast}}{{#ifOdd index}}
-      <v-row cols="12"></v-row>
-    </v-row>
-    {{/ifOdd}}{{/if}}
-    {{/forEach}}
-  </v-container>
-</template>
-
-<script>
-{{#if paramsHaveRefs}}
-import { mapActions } from 'vuex';
-import { mapFields } from 'vuex-map-fields';
-{{/if}}
-
-export default {
-  name: '{{{titleUcFirst}}}Filter',
-  props: {
-    values: {
-      type: Object,
-      required: true
-    }
-  },
-  mounted() {
-    {{#each parameters}}
-    {{#if reference}}
-    this.{{{name}}}GetSelectItems();
-    {{/if}}
-    {{/each}}
-  },
-
-  computed: {
-    {{#if paramsHaveRefs}}
-    {{#each parameters}}
-      {{#if reference}}
-      {{#compare type "==" "text" }}
-      ...mapFields('{{{lowercase reference.title}}}', {
-        {{{name}}}SelectItems: 'selectItems',
-      }),
-      {{/compare}}
-      {{/if}}
-    {{/each}}
-    {{/if}}
-    // eslint-disable-next-line
-    item() {
-      return this.initialValues || this.values;
-    }
-  },
-  methods: {
-    {{#if paramsHaveRefs}}
-    ...mapActions({
-      {{#each parameters}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      {{{name}}}GetSelectItems: '{{{lowercase reference.title}}}/fetchSelectItems',
-      {{/if}}
-      {{/compare}}
-      {{/each}}
-    }),
-    {{/if}}
-  }
-};
-</script>
diff --git a/templates/nuxt/components/foo/FooCreate.vue b/templates/nuxt/components/foo/FooCreate.vue
new file mode 100644
index 00000000..2f3f9ef7
--- /dev/null
+++ b/templates/nuxt/components/foo/FooCreate.vue
@@ -0,0 +1,52 @@
+<template>
+  <nuxt-link :to="{ name: '{{lc}}s' }" class="text-blue-600 hover:text-blue-800">
+    &lt; Back to list
+  </nuxt-link>
+
+  <h1 class="text-3xl my-4">Create {{titleUcFirst}}</h1>
+
+  <div
+    v-if="isLoading"
+    class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm"
+    role="status"
+  >
+    Loading...
+  </div>
+
+  <div
+    v-if="error"
+    class="bg-red-100 rounded py-4 px-4 my-2 text-red-700 text-sm"
+    role="alert"
+  >
+    \{{ error }}
+  </div>
+
+  <Form :errors="violations" @submit="create" />
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import Form from "~~/components/{{lc}}/{{titleUcFirst}}Form.vue";
+import { use{{titleUcFirst}}CreateStore } from "~~/stores/{{lc}}/create";
+import { useCreateItem } from "~~/composables/api";
+import { getIdFromIri } from "~~/utils/resource";
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+
+const {{lc}}CreateStore = use{{titleUcFirst}}CreateStore();
+const { created, isLoading, violations, error } = storeToRefs({{lc}}CreateStore);
+
+async function create(item: {{titleUcFirst}}) {
+  const data = await useCreateItem<{{titleUcFirst}}>("{{name}}", item);
+  {{lc}}CreateStore.setData(data);
+
+  if (!created?.value?.["@id"]) {
+    {{lc}}CreateStore.setError("Missing item id. Please reload");
+    return;
+  }
+
+  navigateTo({
+    name: "{{lc}}s-id-edit",
+    params: { id: getIdFromIri(created?.value?.["@id"]) },
+  });
+}
+</script>
diff --git a/templates/nuxt/components/foo/FooForm.vue b/templates/nuxt/components/foo/FooForm.vue
new file mode 100644
index 00000000..f9f809de
--- /dev/null
+++ b/templates/nuxt/components/foo/FooForm.vue
@@ -0,0 +1,97 @@
+<template>
+  <form class="py-4" @submit.prevent="emitSubmit">
+    {{#forEach formFields}}
+    <div class="mb-2">
+      <label
+        for="{{../lc}}_{{name}}"
+        class="text-gray-700 block text-sm font-bold capitalize"
+      >
+        {{name}}
+      </label>
+      {{#if isRelations}}
+      <FormRepeater
+        :values="item.{{name}}"
+        @update="(values: any[]) => (item.{{name}} = values)"
+      />
+      {{else}}
+      <input
+        id="{{../lc}}_{{name}}"
+        v-model="item.{{name}}"
+        :class="[
+          'mt-1 w-full px-3 py-2 border rounded',
+          violations?.{{name}} ? 'border-red-500' : 'border-gray-300',
+        ]"
+        {{#compare type "==" "dateTime" }}
+        type="date"
+        {{/compare}}
+        {{#compare type "!=" "dateTime" }}
+        type="{{type}}"
+        {{/compare}}
+        {{#if step}}
+        step="{{step}}"
+        {{/if}}
+        {{#if required}}
+        required
+        {{/if}}
+        placeholder="{{description}}"
+      />
+      {{/if}}
+      <div
+        v-if="violations?.{{name}}"
+        class="bg-red-100 rounded py-4 px-4 my-2 text-red-700 text-sm"
+      >
+        \{{ violations.{{name}} }}
+      </div>
+    </div>
+    {{/forEach}}
+
+    <button
+      type="submit"
+      class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
+    >
+      Submit
+    </button>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { Ref } from "vue";
+{{#if hasIsRelations}}
+import FormRepeater from "~~/components/common/FormRepeater.vue";
+{{/if}}
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+import type { SubmissionErrors } from "~~/types/error";
+
+const props = defineProps<{
+  values?: {{titleUcFirst}};
+  errors?: SubmissionErrors;
+}>();
+
+const violations = toRef(props, "errors");
+
+let item: Ref<{{titleUcFirst}}> = ref({});
+
+if (props.values) {
+  item.value = {
+    ...props.values,
+    {{#each fields}}
+    {{#compare type "==" "dateTime" }}
+    publicationDate: formatDateInput(props.values.publicationDate),
+    {{/compare}}
+    {{#if isEmbeddeds}}
+    {{name}}: props.values.{{name}}?.map((item: any) => item["@id"] ?? "") ?? [],
+    {{else if embedded}}
+    {{name}}: props.values.{{name}}?.["@id"],
+    {{/if}}
+    {{/each}}
+  };
+}
+
+let emit = defineEmits<{
+  (e: "submit", item: {{titleUcFirst}}): void;
+}>();
+
+function emitSubmit() {
+  emit("submit", item.value);
+}
+</script>
diff --git a/templates/nuxt/components/foo/FooList.vue b/templates/nuxt/components/foo/FooList.vue
new file mode 100644
index 00000000..f3137907
--- /dev/null
+++ b/templates/nuxt/components/foo/FooList.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="flex items-center justify-between">
+    <h1 class="text-3xl my-4">{{titleUcFirst}} List</h1>
+
+    <nuxt-link
+      :to="{ name: '{{lc}}s-create' }"
+      class="px-6 py-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700"
+    >
+      Create
+    </nuxt-link>
+  </div>
+
+  <div
+    v-if="isLoading"
+    class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm"
+    role="status"
+  >
+    Loading...
+  </div>
+
+  <div
+    v-if="error"
+    class="bg-red-100 rounded py-4 px-4 my-2 text-red-700 text-sm"
+    role="alert"
+  >
+    \{{ error }}
+  </div>
+
+  <div
+    v-if="deletedItem || mercureDeletedItem"
+    class="bg-green-100 rounded py-4 px-4 my-2 text-green-700 text-sm"
+    role="status"
+  >
+    <template v-if="deletedItem">\{{ deletedItem["@id"] }} deleted.</template>
+    <template v-else-if="mercureDeletedItem">
+      \{{ mercureDeletedItem["@id"] }} deleted by another user.
+    </template>
+  </div>
+
+  <div v-if="!isLoading" class="overflow-x-auto">
+    <table class="min-w-full">
+      <thead class="border-b">
+        <tr>
+          <th class="text-sm font-medium px-6 py-4 text-left capitalize">
+            id
+          </th>
+          {{#each fields}}
+          <th class="text-sm font-medium px-6 py-4 text-left capitalize">
+            {{name}}
+          </th>
+          {{/each }}
+          <th
+            colspan="2"
+            class="text-sm font-medium px-6 py-4 text-left capitalize"
+          >
+            Actions
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="item in items" :key="item['@id']" class="border-b">
+          <td class="px-6 py-4 text-sm">
+            <nuxt-link
+              :to="{ name: '{{lc}}s-id', params: { id: getIdFromIri(item['@id']) } }"
+              class="text-blue-600 hover:text-blue-800"
+            >
+              \{{ item["@id"] }}
+            </nuxt-link>
+          </td>
+          {{#each fields}}
+          <td class="px-6 py-4 text-sm">
+          {{#if isReferences}}
+            <template v-if="router.hasRoute('{{reference.name}}-id')">
+              <nuxt-link
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :key="{{lowercase reference.title}}"
+                :to="{ name: '{{lowercase reference.title}}s-id', params: { id: {{lowercase reference.title}} } }"
+                class="text-blue-600 hover:text-blue-800"
+              >
+                \{{ {{lowercase reference.title}} }}
+
+                <br />
+              </nuxt-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :key="{{lowercase reference.title}}"
+              >
+                \{{ {{lowercase reference.title}} }}
+              </p>
+            </template>
+          {{else if reference}}
+            <nuxt-link
+              v-if="router.hasRoute('{{reference.name}}-id')"
+              :to="{ name: '{{lowercase reference.title}}s-id', params: { id: item.{{lowercase reference.title}} } }"
+              class="text-blue-600 hover:text-blue-800"
+            >
+              \{{ item.{{lowercase reference.title}} }}
+            </nuxt-link>
+
+            <p v-else>
+              \{{ item.{{lowercase reference.title}} }}
+            </p>
+          {{else if isEmbeddeds}}
+            <template v-if="router.hasRoute('{{embedded.name}}-id')">
+              <nuxt-link
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :key="{{lowercase embedded.title}}['@id']"
+                :to="{ name: '{{lowercase embedded.title}}s-id', params: { id: getIdFromIri({{lowercase embedded.title}}['@id']) } }"
+                class="text-blue-600 hover:text-blue-800"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+
+                <br />
+              </nuxt-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :key="{{lowercase embedded.title}}['@id']"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+              </p>
+            </template>
+          {{else if embedded}}
+            <nuxt-link
+              v-if="router.hasRoute('{{embedded.name}}-id')"
+              :to="{ name: '{{lowercase embedded.title}}s-id', params: { id: getIdFromIri(item.{{lowercase embedded.title}}['@id']) } }"
+              class="text-blue-600 hover:text-blue-800"
+            >
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </nuxt-link>
+
+            <p v-else>
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </p>
+          {{else if (compare type "==" "dateTime") }}
+            \{{ formatDateTime(item.{{name}}) }}
+          {{else}}
+            \{{ item.{{name}} }}
+          {{/if}}
+          </td>
+          {{/each}}
+          <td class="px-6 py-4 text-sm">
+            <nuxt-link
+              :to="{ name: '{{lc}}s-id', params: { id: getIdFromIri(item['@id']) } }"
+              class="px-6 py-2 bg-blue-600 text-white text-xs rounded shadow-md hover:bg-blue-700"
+            >
+              Show
+            </nuxt-link>
+          </td>
+          <td class="px-6 py-4 text-sm">
+            <nuxt-link
+              :to="{ name: '{{lc}}s-id-edit', params: { id: getIdFromIri(item['@id']) } }"
+              class="px-6 py-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700"
+            >
+              Edit
+            </nuxt-link>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div v-if="view" class="flex justify-center">
+    <nav aria-label="Page navigation">
+      <ul class="flex list-style-none">
+        <li :class="{ disabled: !pagination.previous }">
+          <nuxt-link
+            :to="{
+              name: '{{lc}}s-page-page',
+              params: { page: pagination.first },
+            }"
+            aria-label="First page"
+            :class="
+              !pagination.previous
+                ? 'text-gray-500 pointer-events-none'
+                : 'text-gray-800 hover:bg-gray-200'
+            "
+            class="block py-2 px-3 rounded"
+          >
+            <span aria-hidden="true">&lArr;</span> First
+          </nuxt-link>
+        </li>
+
+        <li :class="{ disabled: !pagination.previous }">
+          <nuxt-link
+            :to="{
+              name: '{{lc}}s-page-page',
+              params: { page: pagination.previous ?? pagination.first },
+            }"
+            :class="
+              !pagination.previous
+                ? 'text-gray-500 pointer-events-none'
+                : 'text-gray-800 hover:bg-gray-200'
+            "
+            class="block py-2 px-3 rounded"
+            aria-label="Previous page"
+          >
+            <span aria-hidden="true">&larr;</span> Previous
+          </nuxt-link>
+        </li>
+
+        <li :class="{ disabled: !pagination.next }">
+          <nuxt-link
+            :to="{
+              name: '{{lc}}s-page-page',
+              params: { page: pagination.next ?? pagination.last },
+            }"
+            :class="
+              !pagination.next
+                ? 'text-gray-500 pointer-events-none'
+                : 'text-gray-800 hover:bg-gray-200'
+            "
+            class="block py-2 px-3 rounded"
+            aria-label="Next page"
+          >
+            Next <span aria-hidden="true">&rarr;</span>
+          </nuxt-link>
+        </li>
+
+        <li :class="{ disabled: !pagination.next }">
+          <nuxt-link
+            :to="{ name: '{{lc}}s-page-page', params: { page: pagination.last } }"
+            :class="
+              !pagination.next
+                ? 'text-gray-500 pointer-events-none'
+                : 'text-gray-800 hover:bg-gray-200'
+            "
+            class="block py-2 px-3 rounded"
+            aria-label="Last page"
+          >
+            Last <span aria-hidden="true">&rArr;</span>
+          </nuxt-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { useMercureList } from "~~/composables/mercureList";
+import { use{{titleUcFirst}}DeleteStore } from "~~/stores/{{lc}}/delete";
+import { use{{titleUcFirst}}ListStore } from "~~/stores/{{lc}}/list";
+import { useFetchList } from "~~/composables/api";
+import { getIdFromIri } from "~~/utils/resource";
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+
+{{#if hasRelations}}
+const router = useRouter();
+{{/if}}
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { deleted: deletedItem, mercureDeleted: mercureDeletedItem } =
+  storeToRefs({{lc}}DeleteStore);
+
+const {{lc}}ListStore = use{{titleUcFirst}}ListStore();
+const { items, view, error, isLoading, hubUrl } = await useFetchList<{{titleUcFirst}}>(
+  "{{name}}"
+);
+{{lc}}ListStore.setData({ items, view, error, isLoading, hubUrl });
+
+const pagination = {
+  first: view.value?.["hydra:first"]?.slice(-1),
+  previous: view.value?.["hydra:previous"]?.slice(-1),
+  next: view.value?.["hydra:next"]?.slice(-1),
+  last: view.value?.["hydra:last"]?.slice(-1),
+};
+
+useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
+
+onBeforeUnmount(() => {
+  {{lc}}ListStore.$reset();
+  {{lc}}DeleteStore.$reset();
+});
+</script>
diff --git a/templates/nuxt/components/foo/FooShow.vue b/templates/nuxt/components/foo/FooShow.vue
new file mode 100644
index 00000000..65627f41
--- /dev/null
+++ b/templates/nuxt/components/foo/FooShow.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="flex items-center justify-between">
+    <nuxt-link
+      :to="{ name: '{{lc}}s' }"
+      class="text-blue-600 hover:text-blue-800"
+    >
+      &lt; Back to list
+    </nuxt-link>
+
+    <div>
+      <nuxt-link
+        v-if="item"
+        :to="{ name: '{{lc}}s-id-edit', params: { id: getIdFromIri(item['@id']) } }"
+        class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700"
+      >
+        Edit
+      </nuxt-link>
+      <button
+        class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700"
+        @click="deleteItem"
+      >
+        Delete
+      </button>
+    </div>
+  </div>
+
+  <h1 class="text-3xl my-4">Show {{titleUcFirst}} \{{ item?.["@id"] }}</h1>
+
+  <div
+    v-if="isLoading"
+    class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm"
+    role="status"
+  >
+    Loading...
+  </div>
+
+  <div
+    v-if="error || deleteError"
+    class="bg-red-100 rounded py-4 px-4 my-2 text-red-700 text-sm"
+    role="alert"
+  >
+    \{{ error || deleteError }}
+  </div>
+
+  <div v-if="item" class="overflow-x-auto">
+    <table class="min-w-full">
+      <thead class="border-b">
+        <tr>
+          <th scope="col" class="text-sm font-medium px-6 py-4 text-left">
+            Field
+          </th>
+          <th scope="col" class="text-sm font-medium px-6 py-4 text-left">
+            Value
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each fields}}
+        <tr class="border-b">
+          <th
+            class="text-sm font-medium px-6 py-4 text-left capitalize"
+            scope="row"
+          >
+            {{name}}
+          </th>
+          <td class="px-6 py-4 whitespace-nowrap text-sm">
+          {{#if isReferences}}
+            <template v-if="router.hasRoute('{{reference.name}}-id')">
+              <nuxt-link
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :key="{{lowercase reference.title}}"
+                :to="{ name: '{{lowercase reference.title}}s-id', params: { id: {{lowercase reference.title}} } }"
+                class="text-blue-600 hover:text-blue-800"
+              >
+                \{{ {{lowercase reference.title}} }}
+
+                <br />
+              </nuxt-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :key="{{lowercase reference.title}}"
+              >
+                \{{ {{lowercase reference.title}} }}
+              </p>
+            </template>
+          {{else if reference}}
+            <nuxt-link
+              v-if="router.hasRoute('{{reference.name}}-id')"
+              :to="{ name: '{{lowercase reference.title}}s-id', params: { id: item.{{lowercase reference.title}} } }"
+              class="text-blue-600 hover:text-blue-800"
+            >
+              \{{ item.{{lowercase reference.title}} }}
+            </nuxt-link>
+
+            <p v-else>
+              \{{ item.{{lowercase reference.title}} }}
+            </p>
+          {{else if isEmbeddeds}}
+            <template v-if="router.hasRoute('{{embedded.name}}-id')">
+              <nuxt-link
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :key="{{lowercase embedded.title}}['@id']"
+                :to="{ name: '{{lowercase embedded.title}}s-id', params: { id: getIdFromIri({{lowercase embedded.title}}['@id']) } }"
+                class="text-blue-600 hover:text-blue-800"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+
+                <br />
+              </nuxt-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :key="{{lowercase embedded.title}}['@id']"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+              </p>
+            </template>
+          {{else if embedded}}
+            <nuxt-link
+              v-if="router.hasRoute('{{embedded.name}}-id')"
+              :to="{ name: '{{lowercase embedded.title}}s-id', params: { id: getIdFromIri(item.{{lowercase embedded.title}}['@id']) } }"
+              class="text-blue-600 hover:text-blue-800"
+            >
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </nuxt-link>
+
+            <p v-else>
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </p>
+          {{else if (compare type "==" "dateTime") }}
+            \{{ formatDateTime(item.{{name}}) }}
+          {{else}}
+            \{{ item.{{name}} }}
+          {{/if}}
+          </td>
+        </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { use{{titleUcFirst}}ShowStore } from "~~/stores/{{lc}}/show";
+import { use{{titleUcFirst}}DeleteStore } from "~~/stores/{{lc}}/delete";
+import { useMercureItem } from "~~/composables/mercureItem";
+import { useFetchItem } from "~~/composables/api";
+import { getIdFromIri } from "~~/utils/resource";
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+
+const route = useRoute();
+const router = useRouter();
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { error: deleteError, deleted } = storeToRefs({{lc}}DeleteStore);
+
+const {{lc}}ShowStore = use{{titleUcFirst}}ShowStore();
+
+useMercureItem({
+  store: {{lc}}ShowStore,
+  deleteStore: {{lc}}DeleteStore,
+  redirectRouteName: "{{lc}}s",
+});
+
+const id = decodeURIComponent(route.params.id as string);
+const {
+  retrieved: item,
+  isLoading,
+  error,
+  hubUrl,
+} = await useFetchItem<{{titleUcFirst}}>(`{{name}}/${id}`);
+{{lc}}ShowStore.setData({ retrieved: item, isLoading, error, hubUrl });
+
+async function deleteItem() {
+  if (!item?.value) {
+    {{lc}}DeleteStore.setError("No item found. Please reload");
+    return;
+  }
+
+  if (window.confirm("Are you sure you want to delete this {{lc}}?")) {
+    const { error } = await useDeleteItem(item.value);
+
+    if (error.value) {
+      {{lc}}DeleteStore.setError(error.value);
+      return;
+    }
+
+    {{lc}}DeleteStore.setDeleted(item.value);
+    {{lc}}DeleteStore.setMercureDeleted(undefined);
+
+    if (deleted) {
+      router.push({ name: "{{lc}}s" });
+    }
+  }
+}
+
+onBeforeUnmount(() => {
+  {{lc}}ShowStore.$reset();
+});
+</script>
diff --git a/templates/nuxt/components/foo/FooUpdate.vue b/templates/nuxt/components/foo/FooUpdate.vue
new file mode 100644
index 00000000..94e66c54
--- /dev/null
+++ b/templates/nuxt/components/foo/FooUpdate.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="flex items-center justify-between">
+    <nuxt-link
+      :to="{ name: '{{lc}}s' }"
+      class="text-blue-600 hover:text-blue-800"
+    >
+      &lt; Back to list
+    </nuxt-link>
+
+    <button
+      class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700"
+      @click="deleteItem"
+    >
+      Delete
+    </button>
+  </div>
+
+  <h1 class="text-3xl my-4">Edit {{titleUcFirst}} \{{ item?.["@id"] }}</h1>
+
+  <div
+    v-if="isLoading || deleteLoading"
+    class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm"
+    role="status"
+  >
+    Loading...
+  </div>
+
+  <div
+    v-if="error || deleteError"
+    class="bg-red-100 rounded py-4 px-4 my-2 text-red-700 text-sm"
+    role="alert"
+  >
+    \{{ error || deleteError }}
+  </div>
+
+  <div
+    v-if="created || updated"
+    class="bg-green-100 rounded py-4 px-4 my-2 text-green-700 text-sm"
+    role="status"
+  >
+    <template v-if="updated">\{{ updated["@id"] }} updated.</template>
+    <template v-else-if="created">\{{ created["@id"] }} created.</template>
+  </div>
+
+  <Form :values="item" :errors="violations" @submit="update" />
+</template>
+
+<script lang="ts" setup>
+import { Ref } from "vue";
+import { storeToRefs } from "pinia";
+import Form from "~~/components/{{lc}}/{{titleUcFirst}}Form.vue";
+import { use{{titleUcFirst}}UpdateStore } from "~~/stores/{{lc}}/update";
+import { use{{titleUcFirst}}CreateStore } from "~~/stores/{{lc}}/create";
+import { use{{titleUcFirst}}DeleteStore } from "~~/stores/{{lc}}/delete";
+import { useMercureItem } from "~~/composables/mercureItem";
+import { useFetchItem, useUpdateItem } from "~~/composables/api";
+import { SubmissionErrors } from "~~/types/error";
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+
+const route = useRoute();
+const router = useRouter();
+
+const {{lc}}CreateStore = use{{titleUcFirst}}CreateStore();
+const { created } = storeToRefs({{lc}}CreateStore);
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { error: deleteError, deleted, isLoading: deleteLoading } =
+  storeToRefs({{lc}}DeleteStore);
+
+const {{lc}}UpdateStore = use{{titleUcFirst}}UpdateStore();
+
+useMercureItem({
+  store: {{lc}}UpdateStore,
+  deleteStore: {{lc}}DeleteStore,
+  redirectRouteName: "{{lc}}s",
+});
+
+const id = decodeURIComponent(route.params.id as string);
+let updated: Ref<{{titleUcFirst}} | undefined> = ref(undefined);
+let violations: Ref<SubmissionErrors | undefined> = ref(undefined);
+let {
+  retrieved: item,
+  error,
+  isLoading,
+  hubUrl,
+} = await useFetchItem<{{titleUcFirst}}>(`{{name}}/${id}`);
+{{lc}}UpdateStore.setData({
+  retrieved: item,
+  error,
+  isLoading,
+  hubUrl,
+});
+
+async function update(payload: {{titleUcFirst}}) {
+  if (!item?.value) {
+    {{lc}}UpdateStore.setError("No item found. Please reload");
+    return;
+  }
+
+  const data = await useUpdateItem<{{titleUcFirst}}>(item.value, payload);
+  updated.value = data.updated.value;
+  violations.value = data.violations.value;
+  isLoading.value = data.isLoading.value;
+  error.value = data.error.value;
+  {{lc}}UpdateStore.setUpdateData(data);
+}
+
+async function deleteItem() {
+  if (!item?.value) {
+    {{lc}}DeleteStore.setError("No item found. Please reload");
+    return;
+  }
+
+  if (window.confirm("Are you sure you want to delete this {{lc}}?")) {
+    const { isLoading, error } = await useDeleteItem(item.value);
+
+    if (error.value) {
+      {{lc}}DeleteStore.setError(error.value);
+      return;
+    }
+
+    {{lc}}DeleteStore.setLoading(Boolean(isLoading?.value));
+    {{lc}}DeleteStore.setDeleted(item.value);
+    {{lc}}DeleteStore.setMercureDeleted(undefined);
+
+    if (deleted) {
+      router.push({ name: "{{lc}}s" });
+    }
+  }
+}
+
+onBeforeUnmount(() => {
+  {{lc}}UpdateStore.$reset();
+  {{lc}}CreateStore.$reset();
+});
+</script>
diff --git a/templates/nuxt/components/foo/Form.vue b/templates/nuxt/components/foo/Form.vue
deleted file mode 100644
index 854d6d57..00000000
--- a/templates/nuxt/components/foo/Form.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-  <v-form>
-    <v-container fluid>
-      {{#forEach formFields}}
-      {{#ifOdd index}}
-      <v-row>
-      {{/ifOdd}}
-      {{#compare type "==" "checkbox" }}
-        <v-col cols="12" sm="6" md="6">
-          <v-checkbox
-            v-model="item.{{{name}}}"
-            :error-messages="{{{name}}}Errors"
-            label="{{{name}}}"{{#if required}}
-            required{{/if}}
-            @input="$v.item.{{{name}}}.$touch()"
-            @blur="$v.item.{{{name}}}.$touch()"
-          />
-        </v-col>
-      {{/compare}}
-      {{#compare type "==" "date" }}
-        <v-col cols="12" sm="6" md="6">
-          <InputDate
-            v-model="item.{{{name}}}"
-            label="{{{name}}}"
-            :error-messages="{{{name}}}Errors"{{#if required}}
-            required{{/if}}
-          />
-        </v-col>
-      {{/compare}}
-      {{#compare type "==" "time" }}
-        <v-col cols="12" sm="6" md="6">
-          <v-time-picker
-            v-model="item.{{{name}}}"
-            label="{{{name}}}"
-            :error-messages="{{{name}}}Errors"{{#if required}}
-            required{{/if}}
-          />
-        </v-col>
-      {{/compare}}
-      {{#compare type "==" "dateTime" }}
-        <!-- todo : fix the dateTime format, not supported by default on vuetify -->
-        <v-col cols="12" sm="6" md="6">
-          <InputDate
-            v-model="item.{{{name}}}"
-            label="{{{name}}}"
-            :error-messages="{{{name}}}Errors"{{#if required}}
-            required{{/if}}
-          />
-        </v-col>
-      {{/compare}}
-      {{#compare type "==" "number" }}
-        <v-col cols="12" sm="6" md="6">
-          <v-text-field
-            v-model.number="item.{{{name}}}"
-            :error-messages="{{{name}}}Errors"
-            label="{{{name}}}"{{#if required}}
-            required{{/if}}{{#if step}}
-            step="{{{step}}}"{{/if}}
-            @input="$v.item.{{{name}}}.$touch()"
-            @blur="$v.item.{{{name}}}.$touch()"
-          />
-        </v-col>
-      {{/compare}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-        <v-col cols="12" sm="6" md="6">
-          <v-combobox
-            v-model="item.{{{name}}}"
-            :items="{{{name}}}SelectItems"
-            :error-messages="{{{name}}}Errors"
-            no-data-text="{{{../labels.noresults}}}"
-            label="{{{name}}}"{{#if required}}
-            required{{/if}}{{#unless maxCardinality}}
-            multiple{{/unless}}
-            item-text="@id"
-            item-value="@id"{{#unless maxCardinality}}
-            chips{{/unless}}
-          />
-        </v-col>
-      {{else}}
-        <v-col cols="12" sm="6" md="6">
-          <v-text-field
-            v-model="item.{{{name}}}"
-            :error-messages="{{{name}}}Errors"
-            label="{{{name}}}"{{#if required}}
-            required{{/if}}
-            @input="$v.item.{{{name}}}.$touch()"
-            @blur="$v.item.{{{name}}}.$touch()"
-          />
-        </v-col>
-      {{/if}}
-      {{/compare}}
-      {{#ifEven index}}
-      </v-row>
-      {{/ifEven}}
-      {{#if isLast}}{{#ifOdd index}}
-        <v-col cols="12"></v-col>
-      </v-row>
-      {{/ifOdd}}{{/if}}
-      {{/forEach}}
-    </v-container>
-  </v-form>
-</template>
-
-<script>
-import has from 'lodash/has';
-import { validationMixin } from 'vuelidate';
-import { required } from 'vuelidate/lib/validators';
-import { mapActions } from 'vuex';
-import { mapFields } from 'vuex-map-fields';
-{{#if formContainsDate}}
-import InputDate from '../InputDate';
-import { date } from '../../validators/date';
-{{/if}}
-
-export default {
-  name: '{{{titleUcFirst}}}Form',
-  mixins: [validationMixin],
-  {{#if formContainsDate}}
-  components: {
-    InputDate,
-  },
-  {{/if}}
-  props: {
-    values: {
-      type: Object,
-      required: true
-    },
-
-    errors: {
-      type: Object,
-      default: () => {}
-    },
-
-    initialValues: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  mounted() {
-    {{#each formFields}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      this.{{{name}}}GetSelectItems();
-      {{/if}}
-      {{/compare}}
-    {{/each}}
-  },
-  data: () => ({
-    {{#each formFields}}
-      {{{name}}}: null,
-    {{/each}}
-  }),
-  computed: {
-    {{#each formFields}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      ...mapFields('{{{lowercase reference.title}}}', {
-        {{{name}}}SelectItems: 'selectItems'
-      }),
-      {{/if}}
-      {{/compare}}
-    {{/each}}
-
-    // eslint-disable-next-line
-    item() {
-      return this.initialValues || this.values;
-    },
-
-    {{#each formFields}}
-    {{{name}}}Errors() {
-      const errors = [];
-
-      if (!this.$v.item.{{{name}}}.$dirty) return errors;
-
-      has(this.violations, '{{{name}}}') && errors.push(this.violations.{{{name}}});
-
-      {{#if required}}
-      !this.$v.item.{{{name}}}.required && errors.push('{{{../labels.required}}}');
-      {{/if}}
-
-      return errors;
-    },
-    {{/each}}
-
-    violations() {
-      return this.errors || {};
-    }
-  },
-  methods: {
-    {{#each formFields}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      ...mapActions({
-        {{{name}}}GetSelectItems: '{{{lowercase reference.title}}}/fetchSelectItems'
-      }),
-      {{/if}}
-      {{/compare}}
-    {{/each}}
-  },
-  validations: {
-    item: {
-      {{#each formFields}}
-      {{{name}}}: {
-        {{#if required}}
-        required,
-        {{/if}}
-        {{#if ../formContainsDate}}
-        {{#compare type "==" "dateTime" }}
-        date,
-        {{/compare}}
-        {{#compare type "==" "date" }}
-        date,
-        {{/compare}}
-        {{/if}}
-      },
-      {{/each}}
-    }
-  }
-};
-</script>
diff --git a/templates/nuxt/composables/api.ts b/templates/nuxt/composables/api.ts
new file mode 100644
index 00000000..84bac452
--- /dev/null
+++ b/templates/nuxt/composables/api.ts
@@ -0,0 +1,181 @@
+import { PagedCollection } from "~~/types/collection";
+import { FetchAllData, FetchItemData } from "~~/types/api";
+import { Ref } from "vue";
+import { View } from "~~/types/view";
+import { UseFetchOptions } from "#app";
+import { SubmissionErrors } from "~~/types/error";
+import { Item } from "~~/types/item";
+
+const MIME_TYPE = 'application/ld+json';
+
+async function useApi<T>(path: string, options: UseFetchOptions<T>) {
+  const response = await useFetch(path, {
+    baseURL: ENTRYPOINT,
+
+    mode: "cors",
+
+    headers: {
+      Accept: MIME_TYPE,
+    },
+
+    onResponseError({ response }) {
+      const data = response._data;
+      const error = data["hydra:description"] || response.statusText;
+
+      throw new Error(error);
+    },
+
+    ...options,
+  });
+
+  return response;
+}
+
+export async function useFetchList<T>(
+  resource: string
+): Promise<FetchAllData<T>> {
+  const route = useRoute();
+
+  const items: Ref<T[]> = ref([]);
+  const view: Ref<View | undefined> = ref(undefined);
+  const hubUrl: Ref<URL | undefined> = ref(undefined);
+
+  const page = ref(route.params.page);
+
+  const { data, pending, error } = await useApi<T>(resource, {
+    params: { page },
+
+    onResponse({ response }) {
+      hubUrl.value = extractHubURL(response);
+    },
+  });
+
+  const value = data.value as PagedCollection<T>;
+  items.value = value["hydra:member"];
+  view.value = value["hydra:view"];
+
+  return {
+    items,
+    view,
+    isLoading: pending,
+    error,
+    hubUrl,
+  };
+}
+
+export async function useFetchItem<T>(path: string): Promise<FetchItemData<T>> {
+  const retrieved: Ref<T | undefined> = ref(undefined);
+  const hubUrl: Ref<URL | undefined> = ref(undefined);
+
+  const { data, pending, error } = await useApi<T>(path, {
+    onResponse({ response }) {
+      retrieved.value = response._data;
+      hubUrl.value = extractHubURL(response);
+    },
+  });
+
+  retrieved.value = data.value as T;
+
+  return {
+    retrieved,
+    isLoading: pending,
+    error,
+    hubUrl,
+  };
+}
+
+export async function useCreateItem<T>(resource: string, payload: Item) {
+  const created: Ref<T | undefined> = ref(undefined);
+  const violations: Ref<SubmissionErrors | undefined> = ref(undefined);
+
+  const { data, pending, error } = await useApi(resource, {
+    method: "POST",
+    body: payload,
+
+    onResponseError({ response }) {
+      const data = response._data;
+      const error = data["hydra:description"] || response.statusText;
+
+      if (!data.violations) throw new Error(error);
+
+      const errors: SubmissionErrors = { _error: error };
+      data.violations.forEach(
+        (violation: { propertyPath: string; message: string }) => {
+          errors[violation.propertyPath] = violation.message;
+        }
+      );
+
+      violations.value = errors;
+
+      throw new SubmissionError(errors);
+    },
+  });
+
+  created.value = data.value as T;
+
+  return {
+    created,
+    isLoading: pending,
+    error,
+    violations,
+  };
+}
+
+export async function useUpdateItem<T>(item: Item, payload: Item) {
+  const updated: Ref<T | undefined> = ref(undefined);
+  const violations: Ref<SubmissionErrors | undefined> = ref(undefined);
+
+  const { data, pending, error } = await useApi(item["@id"] ?? "", {
+    method: "PUT",
+    body: payload,
+    headers: {
+      Accept: MIME_TYPE,
+      "Content-Type": MIME_TYPE,
+    },
+
+    onResponseError({ response }) {
+      const data = response._data;
+      const error = data["hydra:description"] || response.statusText;
+
+      if (!data.violations) throw new Error(error);
+
+      const errors: SubmissionErrors = { _error: error };
+      data.violations.forEach(
+        (violation: { propertyPath: string; message: string }) => {
+          errors[violation.propertyPath] = violation.message;
+        }
+      );
+
+      violations.value = errors;
+
+      throw new SubmissionError(errors);
+    },
+  });
+
+  updated.value = data.value as T;
+
+  return {
+    updated,
+    isLoading: pending,
+    error,
+    violations,
+  };
+}
+
+export async function useDeleteItem(item: Item) {
+  const error: Ref<string | undefined> = ref(undefined);
+
+  if (!item?.["@id"]) {
+    error.value = "No item found. Please reload";
+    return {
+      error,
+    };
+  }
+
+  const { pending } = await useApi(item["@id"] ?? "", { method: "DELETE" });
+
+  return {
+    isLoading: pending,
+    error,
+  };
+}
diff --git a/templates/nuxt/mixins/create.js b/templates/nuxt/mixins/create.js
deleted file mode 100644
index 356e7861..00000000
--- a/templates/nuxt/mixins/create.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import notification from './notification';
-import { formatDateTime } from '../utils/dates';
-import { getPath } from '../utils/fetch';
-
-export default {
-  mixins: [notification],
-  methods: {
-    formatDateTime,
-    onCreated(item) {
-      this.showMessage(`${item['@id']} created`);
-
-      this.$router.push(getPath(item['@id'], this.$options.pathTemplate));
-    },
-    onSendForm() {
-      const createForm = this.$refs.createForm;
-      createForm.$v.$touch();
-      if (!createForm.$v.$invalid) {
-        this.create(createForm.$v.item.$model);
-      }
-    },
-    resetForm() {
-      this.$refs.createForm.$v.$reset();
-      this.item = {};
-    }
-  },
-  watch: {
-    created(created) {
-      if (!created) {
-        return;
-      }
-
-      this.onCreated(created);
-    },
-
-    error(message) {
-      message && this.showError(message);
-    }
-  }
-};
diff --git a/templates/nuxt/mixins/list.js b/templates/nuxt/mixins/list.js
deleted file mode 100644
index bc21f20b..00000000
--- a/templates/nuxt/mixins/list.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-import { formatDateTime } from '../utils/dates';
-import notification from './notification';
-
-export default {
-  mixins: [notification],
-
-  async fetch({ store }) {
-    await store.dispatch('{{{lc}}}/fetchAll')
-  },
-
-  data() {
-    return {
-      options: {
-        sortBy: [],
-        sortDesc: [],
-        page: 1,
-        itemsPerPage: 30
-      },
-      filters: {}
-    };
-  },
-
-  watch: {
-    deletedItem(item) {
-      this.showMessage(`${item['@id']} deleted.`);
-    },
-
-    error(message) {
-      message && this.showError(message);
-    },
-
-    items() {
-      this.options.totalItems = this.totalItems;
-    }
-  },
-
-  methods: {
-    onUpdateOptions({ page, itemsPerPage, sortBy, sortDesc, totalItems } = {}) {
-      let params = {
-        ...this.filters
-      };
-      if (itemsPerPage > 0) {
-        params = { ...params, itemsPerPage, page };
-      }
-
-      if (!isEmpty(sortBy) && !isEmpty(sortDesc)) {
-        params[`order[${sortBy[0]}]`] = sortDesc[0] ? 'desc' : 'asc'
-      }
-
-      this.resetList = true;
-
-      Object.assign(this.options, {
-        sortBy,
-        sortDesc,
-        itemsPerPage,
-        totalItems
-      });
-
-      this.fetchAll(params);
-    },
-
-    onSendFilter() {
-      this.resetList = true;
-      this.onUpdateOptions(this.options);
-    },
-
-    resetFilter() {
-      this.filters = {};
-      this.onSendFilter();
-    },
-
-    deleteHandler(item) {
-      this.deleteItem(item).then(() => this.onUpdateOptions(this.options));
-    },
-    formatDateTime
-  }
-};
diff --git a/templates/nuxt/mixins/notification.js b/templates/nuxt/mixins/notification.js
deleted file mode 100644
index 9ad61347..00000000
--- a/templates/nuxt/mixins/notification.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { mapFields } from 'vuex-map-fields';
-
-export default {
-  computed: {
-    ...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout'])
-  },
-
-  methods: {
-    cleanState() {
-      setTimeout(() => {
-        this.show = false;
-      }, this.timeout);
-    },
-
-    showError(error) {
-      this.showMessage(error, 'danger');
-    },
-
-    showMessage(message, color = 'success') {
-      this.show = true;
-      this.color = color;
-
-      if (typeof message === 'string') {
-        this.text = message;
-        this.cleanState();
-
-        return;
-      }
-
-      this.text = message.message;
-
-      if (message.response) this.subText = message.response.data.message;
-
-      this.cleanState();
-    }
-  }
-};
diff --git a/templates/nuxt/mixins/show.js b/templates/nuxt/mixins/show.js
deleted file mode 100644
index 5739742a..00000000
--- a/templates/nuxt/mixins/show.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import notification from './notification';
-import { formatDateTime } from '../utils/dates';
-
-export default {
-  mixins: [notification],
-  created() {
-    this.retrieve(`/${this.$options.name}/${this.$route.params.id}`);
-  },
-  beforeDestroy() {
-    this.reset();
-  },
-  computed: {
-    item() {
-      return this.find(`/${this.$options.name}/${this.$route.params.id}`);
-    }
-  },
-  methods: {
-    del() {
-      this.deleteItem(this.item).then(() => {
-        this.showMessage(`${this.deleted['@id']} deleted.`);
-        this.$router.push(`/${this.$options.servicePrefix}`)
-      });
-    },
-    formatDateTime,
-    reset() {
-      this.delReset();
-    },
-  },
-  watch: {
-    error(message) {
-      message && this.showError(message);
-    },
-    deleteError(message) {
-      message && this.showError(message);
-    }
-  }
-};
diff --git a/templates/nuxt/mixins/update.js b/templates/nuxt/mixins/update.js
deleted file mode 100644
index cf024c3a..00000000
--- a/templates/nuxt/mixins/update.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import notification from './notification';
-import { formatDateTime } from '../utils/dates';
-
-export default {
-  mixins: [notification],
-  data() {
-    return {
-      item: {}
-    };
-  },
-  created() {
-    this.retrieve(`/${this.$options.name}/${this.$route.params.id}`);
-  },
-  beforeDestroy() {
-    this.reset();
-  },
-  computed: {
-    retrieved() {
-      return this.find(`/${this.$options.name}/${this.$route.params.id}`);
-    }
-  },
-  methods: {
-    del() {
-      this.deleteItem(this.retrieved).then(() => {
-        this.showMessage(`${this.deleted['@id']} deleted.`);
-        this.$router.push(`/${this.$options.servicePrefix}`)
-      });
-    },
-    formatDateTime,
-    reset() {
-      this.$refs.updateForm.$v.$reset();
-      this.updateReset();
-      this.delReset();
-      this.createReset();
-    },
-
-    onSendForm() {
-      const updateForm = this.$refs.updateForm;
-      updateForm.$v.$touch();
-
-      if (!updateForm.$v.$invalid) {
-        this.update(updateForm.$v.item.$model);
-      }
-    },
-
-    resetForm() {
-      this.$refs.updateForm.$v.$reset();
-      this.item = { ...this.retrieved };
-    }
-  },
-  watch: {
-    deleted(deleted) {
-      if (!deleted) {
-        return;
-      }
-      this.$router.push(`/${this.$options.servicePrefix}`)
-    },
-
-    error(message) {
-      message && this.showError(message);
-    },
-
-    deleteError(message) {
-      message && this.showError(message);
-    },
-
-    updated(val) {
-      this.showMessage(`${val['@id']} updated.`);
-    },
-
-    retrieved(val) {
-      this.item = { ...val };
-    }
-  }
-};
diff --git a/templates/nuxt/nuxt.config.ts b/templates/nuxt/nuxt.config.ts
new file mode 100644
index 00000000..639a7749
--- /dev/null
+++ b/templates/nuxt/nuxt.config.ts
@@ -0,0 +1,21 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ["@pinia/nuxt"],
+  css: ["~/assets/css/style.css"],
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+  // Waiting for https://github.com/unjs/nitro/issues/603 to enable SSR (SWR).
+  ssr: false,
+  routeRules: {
+    "/**": { swr: 1 }
+  },
+  nitro: {
+    commands: {
+      preview: 'npx serve ./public'
+    }
+  }
+})
diff --git a/templates/nuxt/pages/foos/[id]/edit.vue b/templates/nuxt/pages/foos/[id]/edit.vue
new file mode 100644
index 00000000..3f13a87f
--- /dev/null
+++ b/templates/nuxt/pages/foos/[id]/edit.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="container mx-auto px-4 max-w-2xl mt-4">
+    <Update />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Update from "~~/components/{{lc}}/{{titleUcFirst}}Update.vue";
+</script>
diff --git a/templates/nuxt/pages/foos/[id]/index.vue b/templates/nuxt/pages/foos/[id]/index.vue
new file mode 100644
index 00000000..7c81ef7e
--- /dev/null
+++ b/templates/nuxt/pages/foos/[id]/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="container mx-auto px-4 max-w-2xl mt-4">
+    <Show />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Show from "~~/components/{{lc}}/{{titleUcFirst}}Show.vue";
+</script>
diff --git a/templates/nuxt/pages/foos/_id/edit.vue b/templates/nuxt/pages/foos/_id/edit.vue
deleted file mode 100644
index 6075c847..00000000
--- a/templates/nuxt/pages/foos/_id/edit.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<!-- TODO : Use this for create / update !! -->
-<template>
-  <div>
-    <Toolbar
-      :list-href="`/${$options.servicePrefix}`"
-      :handle-submit="onSendForm"
-      :handle-reset="resetForm"
-      :handle-delete="del"
-    >
-      <template #left>
-        <h1 v-if="item">
-          Edit {{{titleUcFirst}}} \{{ item['@id'] }}
-        </h1>
-      </template>
-    </Toolbar>
-    <{{{titleUcFirst}}}Form
-      ref="updateForm"
-      v-if="item"
-      :values="item"
-      :errors="violations"
-    />
-    <Loading :visible="deleteLoading" />
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex';
-import { mapFields } from 'vuex-map-fields';
-import update from '../../../mixins/update';
-
-const servicePrefix = '{{{lc}}}s';
-
-export default {
-  name: '{{{name}}}',
-  servicePrefix,
-  mixins: [update],
-  components: {
-    Loading: () => import('../../../components/Loading'),
-    Toolbar: () => import('../../../components/Toolbar'),
-    {{{titleUcFirst}}}Form: () => import('../../../components/{{{lc}}}/Form.vue')
-  },
-
-  computed: {
-    ...mapFields('{{{lc}}}', {
-      deleteLoading: 'isLoading',
-      isLoading: 'isLoading',
-      error: 'error',
-      updated: 'updated',
-      deleted: 'deleted',
-      violations: 'violations'
-    }),
-    ...mapGetters('{{{lc}}}', ['find'])
-  },
-
-  methods: {
-    ...mapActions('{{{lc}}}', {
-      createReset: 'resetCreate',
-      deleteItem: 'del',
-      delReset: 'resetDelete',
-      retrieve: 'load',
-      update: 'update',
-      updateReset: 'resetUpdate'
-    })
-  }
-};
-</script>
diff --git a/templates/nuxt/pages/foos/_id/index.vue b/templates/nuxt/pages/foos/_id/index.vue
deleted file mode 100644
index 83c8ffc6..00000000
--- a/templates/nuxt/pages/foos/_id/index.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!-- TODO : Use this for create / update !! -->
-<template>
-  <div>
-    <Toolbar :edit-href="editPath" :list-href="`/${$options.servicePrefix}`" :handle-delete="del">
-      <template #left>
-        <h1 v-if="item">
-          Show {{{titleUcFirst}}} \{{ item['@id'] }}
-        </h1>
-      </template>
-    </Toolbar>
-    <v-simple-table v-if="item">
-      <template v-slot:default>
-        <thead>
-          <tr>
-            <th class="text-left">
-              Field
-            </th>
-            <th class="text-left">
-              Value
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {{#each fields}}
-            <tr>
-              <th scope="row">{{name}}</th>
-              <td>
-                \{{ item['{{{name}}}'] }}
-              </td>
-            </tr>
-          {{/each}}
-        </tbody>
-      </template>
-    </v-simple-table>
-    <Loading :visible="deleteLoading" />
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex';
-import { mapFields } from 'vuex-map-fields';
-import show from '../../../mixins/show';
-import { getPath } from '../../../utils/fetch'
-
-const servicePrefix = '{{{lc}}}s';
-
-export default {
-  name: '{{{name}}}',
-  servicePrefix,
-  mixins: [show],
-  components: {
-    Loading: () => import('../../../components/Loading'),
-    Toolbar: () => import('../../../components/Toolbar')
-  },
-
-  computed: {
-    ...mapFields('{{{lc}}}', {
-      deleteLoading: 'isLoading',
-      isLoading: 'isLoading',
-      error: 'error',
-      deleted: 'deleted',
-    }),
-    ...mapGetters('{{{lc}}}', ['find']),
-    editPath() {
-      return this.item ? getPath(this.item['@id'], '/{{{lc}}}s/[id]/edit') : '';
-    }
-  },
-
-  methods: {
-    ...mapActions('{{{lc}}}', {
-      deleteItem: 'del',
-      delReset: 'resetDelete',
-      retrieve: 'load',
-    })
-  }
-};
-</script>
diff --git a/templates/nuxt/pages/foos/create.vue b/templates/nuxt/pages/foos/create.vue
index cdbac200..826658fc 100644
--- a/templates/nuxt/pages/foos/create.vue
+++ b/templates/nuxt/pages/foos/create.vue
@@ -1,46 +1,9 @@
 <template>
-  <div>
-    <Toolbar :list-href="`/${$options.servicePrefix}`" :handle-submit="onSendForm" :handle-reset="resetForm">
-      <template #left>
-        <h1>
-          Create {{{titleUcFirst}}}
-        </h1>
-      </template>
-    </Toolbar>
-    <{{{titleUcFirst}}}Form ref="createForm" :values="item" :errors="violations" />
-    <Loading :visible="isLoading" />
+  <div class="container mx-auto px-4 max-w-2xl mt-4">
+    <Create />
   </div>
 </template>
 
-<script>
-import { mapActions } from 'vuex';
-import { createHelpers } from 'vuex-map-fields';
-import create from '../../mixins/create';
-
-const servicePrefix = '{{{lc}}}s';
-
-const { mapFields } = createHelpers({
-  getterType: '{{{lc}}}/getField',
-  mutationType: '{{{lc}}}/updateField'
-});
-
-export default {
-  servicePrefix,
-  pathTemplate: `/${servicePrefix}/[id]`,
-  mixins: [create],
-  components: {
-    Loading: () => import('../../components/Loading'),
-    Toolbar: () => import('../../components/Toolbar'),
-    {{{titleUcFirst}}}Form: () => import('../../components/{{{lc}}}/Form')
-  },
-  data: () => ({
-    item: {}
-  }),
-  computed: {
-    ...mapFields(['error', 'isLoading', 'created', 'violations'])
-  },
-  methods: {
-    ...mapActions('{{{lc}}}', ['create', 'reset'])
-  }
-};
+<script lang="ts" setup>
+import Create from "~~/components/{{lc}}/{{titleUcFirst}}Create.vue";
 </script>
diff --git a/templates/nuxt/pages/foos/index.vue b/templates/nuxt/pages/foos/index.vue
index eb7fa3ba..43d56525 100644
--- a/templates/nuxt/pages/foos/index.vue
+++ b/templates/nuxt/pages/foos/index.vue
@@ -1,182 +1,9 @@
 <template>
-  <div class="{{{lc}}}-list">
-    <Toolbar>
-      <template #left>
-        <h1>
-          {{{titleUcFirst}}} List
-        </h1>
-      </template>
-    </Toolbar>
-    <v-container grid-list-xl fluid>
-      <v-layout row wrap>
-        <v-flex lg12>
-          <v-data-table
-            v-model="selected"
-            :headers="headers"
-            :items="items"
-            :items-per-page.sync="options.itemsPerPage"
-            :loading="isLoading"
-            loading-text="Loading..."
-            :options.sync="options"
-            :server-items-length="totalItems"
-            class="elevation-1"
-            item-key="@id"
-            show-select
-            @update:options="onUpdateOptions"
-            :footer-props="{
-              showFirstLastPage: true
-            }"
-          >
-            <template v-slot:top>
-              <v-toolbar flat color="white">
-                <v-toolbar-title>{{{titleUcFirst}}}</v-toolbar-title>
-
-                <v-spacer></v-spacer>
-
-                {{#if parameters.length}}
-                <DataFilter :handle-filter="onSendFilter" :handle-reset="resetFilter">
-                  <{{{titleUcFirst}}}FilterForm
-                    ref="filterForm"
-                    :values="filters"
-                    slot="filter"
-                  />
-                </DataFilter>
-                {{/if}}
-
-                <v-btn
-                  color="primary"
-                  dark
-                  class="ml-2"
-                  :href="`/${$options.servicePrefix}/create`"
-                >
-                  Create
-                </v-btn>
-              </v-toolbar>
-            </template>
-
-            <template slot="item.@id" slot-scope="{ item }">
-              <nuxt-link :to="getPath(item['@id'], '/{{{lc}}}s/[id]')">
-                \{{ item['@id'] }}
-              </nuxt-link>
-            </template>
-            {{#forEach fields~}}
-              {{#switch type~}}
-                {{#case "dateTime"}}
-                  <template slot="item.{{{name}}}" slot-scope="{ item }">
-                    \{{ formatDateTime(item['{{{name}}}'], 'long') }}
-                  </template>
-                {{/case~}}
-                {{#case "date"}}
-                  <template slot="item.{{{name}}}" slot-scope="{ item }">
-                    \{{ formatDateTime(item['{{{name}}}'], 'short') }}
-                  </template>
-                {{/case~}}
-                {{#case "number"}}
-                  <template slot="item.{{{name}}}" slot-scope="{ item }">
-                    \{{ $t(item['{{{name}}}']) }}
-                  </template>
-                {{/case~}}
-                {{#default}}
-                  {{#if reference}}
-                    <template slot="item.{{{name}}}" slot-scope="{ item }">
-                    {{#if maxCardinality }}
-                      <nuxt-link :to="getPath(item['{{{name}}}'], '/{{{lowercase reference.title}}}s/[id]')">
-                        \{{ item['{{{name}}}'] }}
-                      </nuxt-link>
-                    {{else}}
-                      <ul>
-                        <li v-for="_item in item['{{{name}}}']" :key="_item">
-                          <nuxt-link :to="getPath(_item, '/{{{lowercase reference.title}}}s/[id]')">
-                            \{{ _item }}
-                          </nuxt-link>
-                        </li>
-                      </ul>
-                    {{/if}}
-                    </template>
-                  {{/if~}}
-                  {{#if embedded}}
-                    <template slot="item.{{{name}}}" slot-scope="{ item }">
-                    {{#if maxCardinality }}
-                      <nuxt-link :to="getPath(item['{{{name}}}']['@id'], '/{{{lowercase embedded.title}}}s/[id]')">
-                        \{{ item['{{{name}}}']['@id'] }}
-                      </nuxt-link>
-                    {{else}}
-                      <ul>
-                        <li v-for="_item in item['{{{name}}}']" :key="_item['@id']">
-                          <nuxt-link :to="getPath(_item['@id'], '/{{{lowercase embedded.title}}}s/[id]')">
-                            \{{ _item['@id'] }}
-                          </nuxt-link>
-                        </li>
-                      </ul>
-                    {{/if}}
-                    </template>
-                  {{/if~}}
-                {{/default~}}
-              {{/switch}}
-            {{/forEach }}
-
-            <ActionCell
-              slot="item.action"
-              slot-scope="props"
-              :show-href="getPath(props.item['@id'], '/{{{lc}}}s/[id]')"
-              :edit-href="getPath(props.item['@id'], '/{{{lc}}}s/[id]/edit')"
-              :handle-delete="() => deleteHandler(props.item)"
-            ></ActionCell>
-          </v-data-table>
-        </v-flex>
-      </v-layout>
-    </v-container>
+  <div class="p-4">
+    <List />
   </div>
 </template>
 
-<script>
-import { mapActions, mapGetters } from 'vuex';
-import { mapFields } from 'vuex-map-fields';
-import list from '../../mixins/list';
-import { getPath } from '../../utils/fetch';
-
-export default {
-  servicePrefix: '{{{lc}}}s',
-  mixins: [list],
-  components: {
-    Toolbar: () => import('../../components/Toolbar'),
-    ActionCell: () => import('../../components/ActionCell'),
-    {{{titleUcFirst}}}FilterForm: () => import('../../components/{{{lc}}}/Filter'),
-    DataFilter: () => import('../../components/DataFilter')
-  },
-  data: () => ({
-    headers: [
-      { text: 'id', value: '@id' },
-      {{#forEach fields}}
-      { text: '{{{name}}}', value: '{{{name}}}' },
-      {{/forEach}}
-      {
-        text: 'Actions',
-        value: 'action',
-        sortable: false
-      }
-    ],
-    selected: []
-  }),
-  computed: {
-    ...mapGetters('{{{lc}}}', {
-      items: 'list'
-    }),
-    ...mapFields('{{{lc}}}', {
-      deletedItem: 'deleted',
-      error: 'error',
-      isLoading: 'isLoading',
-      resetList: 'resetList',
-      totalItems: 'totalItems',
-      view: 'view'
-    })
-  },
-  methods: {
-    ...mapActions('{{{lc}}}', {
-      fetchAll: 'fetchAll',
-      deleteItem: 'del'
-    }),
-    getPath
-  }
-};
+<script lang="ts" setup>
+import List from "~~/components/{{lc}}/{{titleUcFirst}}List.vue";
 </script>
diff --git a/templates/nuxt/pages/foos/page/[page].vue b/templates/nuxt/pages/foos/page/[page].vue
new file mode 100644
index 00000000..43d56525
--- /dev/null
+++ b/templates/nuxt/pages/foos/page/[page].vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="p-4">
+    <List />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import List from "~~/components/{{lc}}/{{titleUcFirst}}List.vue";
+</script>
diff --git a/templates/nuxt/pages/index.vue b/templates/nuxt/pages/index.vue
new file mode 100644
index 00000000..a495b757
--- /dev/null
+++ b/templates/nuxt/pages/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>
diff --git a/templates/nuxt/store/crud.js b/templates/nuxt/store/crud.js
deleted file mode 100644
index 0f310927..00000000
--- a/templates/nuxt/store/crud.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import Vue from 'vue';
-import { getField, updateField } from 'vuex-map-fields';
-import remove from 'lodash/remove';
-import SubmissionError from '../error/SubmissionError';
-
-const initialState = () => ({
-  allIds: [],
-  byId: {},
-  created: null,
-  deleted: null,
-  error: "",
-  isLoading: false,
-  resetList: false,
-  selectItems: null,
-  totalItems: 0,
-  updated: null,
-  view: null,
-  violations: null
-});
-
-const handleError = (commit, e) => {
-  commit(ACTIONS.TOGGLE_LOADING);
-
-  if (e instanceof SubmissionError) {
-    commit(ACTIONS.SET_VIOLATIONS, e.errors);
-    // eslint-disable-next-line
-    commit(ACTIONS.SET_ERROR, e.errors._error);
-
-    return Promise.reject(e);
-  }
-
-  // eslint-disable-next-line
-  commit(ACTIONS.SET_ERROR, e.message);
-
-  return Promise.reject(e);
-};
-
-export const ACTIONS = {
-  ADD: 'ADD',
-  RESET_CREATE: 'RESET_CREATE',
-  RESET_DELETE: 'RESET_DELETE',
-  RESET_LIST: 'RESET_LIST',
-  RESET_SHOW: 'RESET_SHOW',
-  RESET_UPDATE: 'RESET_UPDATE',
-  SET_CREATED: 'SET_CREATED',
-  SET_DELETED: 'SET_DELETED',
-  SET_ERROR: 'SET_ERROR',
-  SET_SELECT_ITEMS: 'SET_SELECT_ITEMS',
-  SET_TOTAL_ITEMS: 'SET_TOTAL_ITEMS',
-  SET_UPDATED: 'SET_UPDATED',
-  SET_VIEW: 'SET_VIEW',
-  SET_VIOLATIONS: 'SET_VIOLATIONS',
-  TOGGLE_LOADING: 'TOGGLE_LOADING'
-};
-
-export default function makeCrudModule({
-  normalizeRelations = x => x,
-  resolveRelations = x => x,
-  service
-} = {}) {
-  return {
-    actions: {
-      create: ({ commit }, values) => {
-        commit(ACTIONS.SET_ERROR, '');
-        commit(ACTIONS.TOGGLE_LOADING);
-
-        return service
-          .create(values)
-          .then(response => response.json())
-          .then(data => {
-            commit(ACTIONS.TOGGLE_LOADING);
-            commit(ACTIONS.ADD, data);
-            commit(ACTIONS.SET_CREATED, data);
-          })
-          .catch(e => handleError(commit, e));
-      },
-      del: ({ commit }, item) => {
-        commit(ACTIONS.TOGGLE_LOADING);
-
-        return service
-          .del(item)
-          .then(() => {
-            commit(ACTIONS.TOGGLE_LOADING);
-            commit(ACTIONS.SET_DELETED, item);
-          })
-          .catch(e => handleError(commit, e));
-      },
-      fetchAll: ({ commit, state }, params) => {
-        if (!service) throw new Error('No service specified!');
-
-        commit(ACTIONS.TOGGLE_LOADING);
-
-        return service
-          .findAll({ params })
-          .then(response => response.json())
-          .then(retrieved => {
-            commit(ACTIONS.TOGGLE_LOADING);
-
-            commit(
-              ACTIONS.SET_TOTAL_ITEMS,
-              retrieved['{{{hydraPrefix}}}totalItems']
-            );
-            commit(ACTIONS.SET_VIEW, retrieved['{{{hydraPrefix}}}view']);
-
-            if (true === state.resetList) {
-              commit(ACTIONS.RESET_LIST);
-            }
-
-            retrieved['{{{hydraPrefix}}}member'].forEach(item => {
-              commit(ACTIONS.ADD, normalizeRelations(item));
-            });
-          })
-          .catch(e => handleError(commit, e));
-      },
-      fetchSelectItems: (
-        { commit },
-        { params = { properties: ['@id', 'name'] } } = {}
-      ) => {
-        commit(ACTIONS.TOGGLE_LOADING);
-
-        if (!service) throw new Error('No service specified!');
-
-        return service
-          .findAll({ params })
-          .then(response => response.json())
-          .then(retrieved => {
-            commit(
-              ACTIONS.SET_SELECT_ITEMS,
-              retrieved['{{{hydraPrefix}}}member']
-            );
-          })
-          .catch(e => handleError(commit, e));
-      },
-      load: ({ commit }, id) => {
-        if (!service) throw new Error('No service specified!');
-
-        commit(ACTIONS.TOGGLE_LOADING);
-        return service
-          .find(id)
-          .then(response => response.json())
-          .then(item => {
-            commit(ACTIONS.TOGGLE_LOADING);
-            commit(ACTIONS.ADD, normalizeRelations(item));
-          })
-          .catch(e => handleError(commit, e));
-      },
-      resetCreate: ({ commit }) => {
-        commit(ACTIONS.RESET_CREATE);
-      },
-      resetDelete: ({ commit }) => {
-        commit(ACTIONS.RESET_DELETE);
-      },
-      resetShow: ({ commit }) => {
-        commit(ACTIONS.RESET_SHOW);
-      },
-      resetUpdate: ({ commit }) => {
-        commit(ACTIONS.RESET_UPDATE);
-      },
-      update: ({ commit }, item) => {
-        commit(ACTIONS.SET_ERROR, '');
-        commit(ACTIONS.TOGGLE_LOADING);
-
-        return service
-          .update(item)
-          .then(response => response.json())
-          .then(data => {
-            commit(ACTIONS.TOGGLE_LOADING);
-            commit(ACTIONS.SET_UPDATED, data);
-          })
-          .catch(e => handleError(commit, e));
-      }
-    },
-    getters: {
-      find: state => id => {
-        return resolveRelations(state.byId[id]);
-      },
-      getField,
-      list: (state, getters) => {
-        return state.allIds.map(id => getters.find(id));
-      }
-    },
-    mutations: {
-      updateField,
-      [ACTIONS.ADD]: (state, item) => {
-        Vue.set(state.byId, item['@id'], item);
-        Vue.set(state, 'isLoading', false);
-        if (state.allIds.includes(item['@id'])) return;
-        state.allIds.push(item['@id']);
-      },
-      [ACTIONS.RESET_CREATE]: state => {
-        Object.assign(state, {
-          isLoading: false,
-          error: '',
-          created: null,
-          violations: null
-        });
-      },
-      [ACTIONS.RESET_DELETE]: state => {
-        Object.assign(state, {
-          isLoading: false,
-          error: '',
-          deleted: null
-        });
-      },
-      [ACTIONS.RESET_LIST]: state => {
-        Object.assign(state, {
-          allIds: [],
-          byId: {},
-          error: '',
-          isLoading: false,
-          resetList: false
-        });
-      },
-      [ACTIONS.RESET_SHOW]: state => {
-        Object.assign(state, {
-          error: '',
-          isLoading: false
-        });
-      },
-      [ACTIONS.RESET_UPDATE]: state => {
-        Object.assign(state, {
-          error: '',
-          isLoading: false,
-          updated: null,
-          violations: null
-        });
-      },
-      [ACTIONS.SET_CREATED]: (state, created) => {
-        Object.assign(state, { created });
-      },
-      [ACTIONS.SET_DELETED]: (state, deleted) => {
-        if (!state.allIds.includes(deleted['@id'])) return;
-        Object.assign(state, {
-          allIds: remove(state.allIds, item => item['@id'] === deleted['@id']),
-          byId: remove(state.byId, id => id === deleted['@id']),
-          deleted
-        });
-      },
-      [ACTIONS.SET_ERROR]: (state, error) => {
-        Object.assign(state, { error, isLoading: false });
-      },
-      [ACTIONS.SET_SELECT_ITEMS]: (state, selectItems) => {
-        Object.assign(state, {
-          error: '',
-          isLoading: false,
-          selectItems
-        });
-      },
-      [ACTIONS.SET_TOTAL_ITEMS]: (state, totalItems) => {
-        Object.assign(state, { totalItems });
-      },
-      [ACTIONS.SET_UPDATED]: (state, updated) => {
-        Object.assign(state, {
-          byId: {
-            [updated['@id']]: updated
-          },
-          updated
-        });
-      },
-      [ACTIONS.SET_VIEW]: (state, view) => {
-        Object.assign(state, { view });
-      },
-      [ACTIONS.SET_VIOLATIONS]: (state, violations) => {
-        Object.assign(state, { violations });
-      },
-      [ACTIONS.TOGGLE_LOADING]: state => {
-        Object.assign(state, { error: '', isLoading: !state.isLoading });
-      }
-    },
-    namespaced: true,
-    state: initialState
-  };
-}
diff --git a/templates/nuxt/store/foo.js b/templates/nuxt/store/foo.js
deleted file mode 100644
index ef776547..00000000
--- a/templates/nuxt/store/foo.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {{{titleUcFirst}}}Service from '../services/{{{lc}}}'
-import makeCrudModule from './crud'
-
-export default makeCrudModule({
-  service: {{{titleUcFirst}}}Service
-})
diff --git a/templates/nuxt/store/notifications.js b/templates/nuxt/store/notifications.js
deleted file mode 100644
index fb70a236..00000000
--- a/templates/nuxt/store/notifications.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {getField, updateField} from 'vuex-map-fields';
-
-export default {
-  namespaced: true,
-  state: () => ({
-    show: false,
-    color: 'error',
-    text: 'An error occurred',
-    subText: '',
-    timeout: 6000
-  }),
-  getters: {
-    getField
-  },
-  mutations: {
-    updateField
-  }
-};
diff --git a/templates/nuxt/stores/foo/create.ts b/templates/nuxt/stores/foo/create.ts
new file mode 100644
index 00000000..c79cd8cd
--- /dev/null
+++ b/templates/nuxt/stores/foo/create.ts
@@ -0,0 +1,48 @@
+import { defineStore } from "pinia";
+import { {{titleUcFirst}} } from "~~/types/{{lc}}";
+import type { SubmissionErrors } from "~~/types/error";
+import { CreateItemData } from "~~/types/api";
+
+interface State {
+  created?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+  violations?: SubmissionErrors;
+}
+
+export const use{{titleUcFirst}}CreateStore = defineStore("{{lc}}Create", {
+  state: (): State => ({
+    created: undefined,
+    isLoading: false,
+    error: undefined,
+    violations: undefined,
+  }),
+
+  actions: {
+    setData({ created, isLoading, error, violations }: CreateItemData<{{titleUcFirst}}>) {
+      this.setCreated(created.value);
+      this.setLoading(isLoading.value);
+      this.setViolations(violations.value);
+
+      if (error.value instanceof Error) {
+        this.setError(error.value?.message);
+      }
+    },
+
+    setCreated(created?: {{titleUcFirst}}) {
+      this.created = created;
+    },
+
+    setLoading(isLoading: boolean) {
+      this.isLoading = isLoading;
+    },
+
+    setError(error: string | undefined) {
+      this.error = error;
+    },
+
+    setViolations(violations: SubmissionErrors | undefined) {
+      this.violations = violations;
+    },
+  },
+});
diff --git a/templates/nuxt/stores/foo/delete.ts b/templates/nuxt/stores/foo/delete.ts
new file mode 100644
index 00000000..2fff7c1d
--- /dev/null
+++ b/templates/nuxt/stores/foo/delete.ts
@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+
+interface State {
+  deleted?: {{titleUcFirst}};
+  mercureDeleted?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}DeleteStore = defineStore("{{lc}}Delete", {
+  state: (): State => ({
+    deleted: undefined,
+    mercureDeleted: undefined,
+    isLoading: false,
+    error: undefined,
+  }),
+
+  actions: {
+    setLoading(isLoading: boolean) {
+      this.isLoading = isLoading;
+    },
+
+    setDeleted(deleted: {{titleUcFirst}}) {
+      this.deleted = deleted;
+    },
+
+    setMercureDeleted(mercureDeleted: {{titleUcFirst}} | undefined) {
+      this.mercureDeleted = mercureDeleted;
+    },
+
+    setError(error: string) {
+      this.error = error;
+    },
+  },
+});
diff --git a/templates/nuxt/stores/foo/list.ts b/templates/nuxt/stores/foo/list.ts
new file mode 100644
index 00000000..9bcfdf93
--- /dev/null
+++ b/templates/nuxt/stores/foo/list.ts
@@ -0,0 +1,71 @@
+import { defineStore } from "pinia";
+import { {{titleUcFirst}} } from "~~/types/{{lc}}";
+import { View } from "~~/types/view";
+import { FetchAllData } from "~~/types/api";
+
+interface State {
+  items: {{titleUcFirst}}[];
+  hubUrl?: URL;
+  isLoading: boolean;
+  view?: View;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}ListStore = defineStore("{{lc}}List", {
+  state: (): State => ({
+    items: [],
+    isLoading: false,
+    error: undefined,
+    hubUrl: undefined,
+    view: undefined,
+  }),
+
+  actions: {
+    setData({ items, view, isLoading, error, hubUrl }: FetchAllData<{{titleUcFirst}}>) {
+      this.setItems(items.value);
+      this.setLoading(isLoading.value);
+      if (hubUrl) this.setHubUrl(hubUrl.value);
+      if (view) this.setView(view.value);
+
+      if (error.value instanceof Error) {
+        this.setError(error.value?.message);
+      }
+    },
+
+    setLoading(isLoading: boolean) {
+      this.isLoading = isLoading;
+    },
+
+    setItems(items: {{titleUcFirst}}[]) {
+      this.items = items;
+    },
+
+    setHubUrl(hubUrl?: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    setView(view?: View) {
+      this.view = view;
+    },
+
+    setError(error?: string) {
+      this.error = error;
+    },
+
+    updateItem(updatedItem: {{titleUcFirst}}) {
+      const item: {{titleUcFirst}} | undefined = this.items.find(
+        (i) => i["@id"] === updatedItem["@id"]
+      );
+
+      if (!item) return;
+
+      Object.assign(item, updatedItem);
+    },
+
+    deleteItem(deletedItem: {{titleUcFirst}}) {
+      this.items = this.items.filter((item) => {
+        return item["@id"] !== deletedItem["@id"];
+      });
+    },
+  },
+});
diff --git a/templates/nuxt/stores/foo/show.ts b/templates/nuxt/stores/foo/show.ts
new file mode 100644
index 00000000..68859aa9
--- /dev/null
+++ b/templates/nuxt/stores/foo/show.ts
@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+import { FetchItemData } from "~~/types/api";
+interface State {
+  retrieved?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+  hubUrl?: URL;
+}
+
+export const use{{titleUcFirst}}ShowStore = defineStore("{{lc}}Show", {
+  state: (): State => ({
+    retrieved: undefined,
+    isLoading: false,
+    error: "",
+    hubUrl: undefined,
+  }),
+
+  actions: {
+    setData({ retrieved, isLoading, error, hubUrl }: FetchItemData<{{titleUcFirst}}>) {
+      this.setRetrieved(retrieved.value);
+      this.setLoading(isLoading.value);
+      this.setHubUrl(hubUrl.value);
+
+      if (error.value instanceof Error) {
+        this.setError(error.value?.message);
+      }
+    },
+
+    setLoading(isLoading: boolean) {
+      this.isLoading = isLoading;
+    },
+
+    setRetrieved(retrieved?: {{titleUcFirst}}) {
+      this.retrieved = retrieved;
+    },
+
+    setHubUrl(hubUrl?: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    setError(error?: string) {
+      this.error = error;
+    },
+  },
+});
diff --git a/templates/nuxt/stores/foo/update.ts b/templates/nuxt/stores/foo/update.ts
new file mode 100644
index 00000000..0e10f625
--- /dev/null
+++ b/templates/nuxt/stores/foo/update.ts
@@ -0,0 +1,75 @@
+import { defineStore } from "pinia";
+import type { {{titleUcFirst}} } from "~~/types/{{lc}}";
+import type { SubmissionErrors } from "~~/types/error";
+import { FetchItemData, UpdateItemData } from "~~/types/api";
+
+interface State {
+  updated?: {{titleUcFirst}};
+  retrieved?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+  hubUrl?: URL;
+  violations?: SubmissionErrors;
+}
+
+export const use{{titleUcFirst}}UpdateStore = defineStore("{{lc}}Update", {
+  state: (): State => ({
+    updated: undefined,
+    retrieved: undefined,
+    isLoading: false,
+    error: undefined,
+    hubUrl: undefined,
+    violations: undefined,
+  }),
+
+  actions: {
+    setData({ retrieved, isLoading, error, hubUrl }: FetchItemData<{{titleUcFirst}}>) {
+      this.setRetrieved(retrieved.value);
+      this.setLoading(isLoading.value);
+      this.setHubUrl(hubUrl.value);
+
+      if (error.value instanceof Error) {
+        this.setError(error.value?.message);
+      }
+    },
+
+    setUpdateData({
+      updated,
+      isLoading,
+      error,
+      violations,
+    }: UpdateItemData<{{titleUcFirst}}>) {
+      this.setUpdated(updated.value);
+      this.setLoading(isLoading.value);
+      this.setViolations(violations.value);
+
+      if (error.value instanceof Error) {
+        this.setError(error.value?.message);
+      }
+    },
+
+    setRetrieved(retrieved?: {{titleUcFirst}}) {
+      this.retrieved = retrieved;
+    },
+
+    setUpdated(updated?: {{titleUcFirst}}) {
+      this.updated = updated;
+    },
+
+    setHubUrl(hubUrl?: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    setLoading(isLoading: boolean) {
+      this.isLoading = isLoading;
+    },
+
+    setError(error?: string) {
+      this.error = error;
+    },
+
+    setViolations(violations?: SubmissionErrors) {
+      this.violations = violations;
+    },
+  },
+});
diff --git a/templates/nuxt/types/api.ts b/templates/nuxt/types/api.ts
new file mode 100644
index 00000000..d13f68f1
--- /dev/null
+++ b/templates/nuxt/types/api.ts
@@ -0,0 +1,32 @@
+import { Ref } from "vue";
+import { SubmissionErrors } from "./error";
+import { View } from "./view";
+
+export interface FetchAllData<T> {
+  items: Ref<T[]>;
+  view: Ref<View | undefined>;
+  isLoading: Ref<boolean>;
+  error: Ref<Error | null>;
+  hubUrl: Ref<URL | undefined>;
+}
+
+export interface FetchItemData<T> {
+  retrieved: Ref<T | undefined>;
+  isLoading: Ref<boolean>;
+  error: Ref<Error | null>;
+  hubUrl: Ref<URL | undefined>;
+}
+
+export interface CreateItemData<T> {
+  created: Ref<T | undefined>;
+  isLoading: Ref<boolean>;
+  error: Ref<Error | null>;
+  violations: Ref<SubmissionErrors | undefined>;
+}
+
+export interface UpdateItemData<T> {
+  updated: Ref<T | undefined>;
+  isLoading: Ref<boolean>;
+  error: Ref<Error | null>;
+  violations: Ref<SubmissionErrors | undefined>;
+}
diff --git a/templates/nuxt/utils/resource.ts b/templates/nuxt/utils/resource.ts
new file mode 100644
index 00000000..e99e7eed
--- /dev/null
+++ b/templates/nuxt/utils/resource.ts
@@ -0,0 +1,11 @@
+export const getIdFromIri = (iri?: string): string => {
+  if (!iri) return "";
+
+  const id = iri.split("/").pop();
+
+  if (!id) {
+    return "";
+  }
+
+  return id;
+}
diff --git a/templates/quasar/components/common/CommonFormRepeater.vue b/templates/quasar/components/common/CommonFormRepeater.vue
index ab6f6db4..19ca77f6 100644
--- a/templates/quasar/components/common/CommonFormRepeater.vue
+++ b/templates/quasar/components/common/CommonFormRepeater.vue
@@ -66,7 +66,7 @@ function removeField(index: number) {
 function emitUpdate() {
   emit(
     'update',
-    fields.value.filter((review) => review.length)
+    fields.value.filter((field) => field.length)
   );
 }
 </script>
diff --git a/templates/quasar/components/foo/FooForm.vue b/templates/quasar/components/foo/FooForm.vue
index b2d98f79..963da8c5 100644
--- a/templates/quasar/components/foo/FooForm.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -7,7 +7,7 @@
         :values="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
         class="col-12 col-md-8"
-        @update="(values: any) => (item.{{name}} = values)"
+        @update="(values: any[]) => (item.{{name}} = values)"
       />
     {{else}}
       <q-input
diff --git a/templates/vue/components/common/FormRepeater.vue b/templates/vue/components/common/FormRepeater.vue
index 641af3e2..6694eed4 100644
--- a/templates/vue/components/common/FormRepeater.vue
+++ b/templates/vue/components/common/FormRepeater.vue
@@ -61,7 +61,7 @@ function removeField(index: number) {
 function emitUpdate() {
   emit(
     "update",
-    fields.value.filter((review) => review.length)
+    fields.value.filter((field) => field.length)
   );
 }
 </script>
diff --git a/testapp.sh b/testapp.sh
index 62c52119..47459444 100755
--- a/testapp.sh
+++ b/testapp.sh
@@ -34,12 +34,26 @@ if [ "$1" = "react" ]; then
 fi
 
 if [ "$1" = "nuxt" ]; then
-  yarn create nuxt-app --answers "'{\"name\":\"nuxt\",\"language\":\"js\",\"pm\":\"yarn\",\"ui\":\"vuetify\",\"template\":\"html\",\"features\":[],\"linter\":[],\"test\":\"none\",\"mode\":\"spa\",\"target\":\"static\",\"devTools\":[],\"vcs\":\"none\"}'" ./tmp/app/nuxt
-  yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields
+  npx nuxi init ./tmp/app/nuxt
+
+  rm ./tmp/app/nuxt/app.vue
+  rm ./tmp/app/nuxt/nuxt.config.ts
+
+  cp ./templates/nuxt/nuxt.config.ts ./tmp/app/nuxt
+
+  yarn --cwd ./tmp/app/nuxt add dayjs @pinia/nuxt qs @types/qs
 
   cp -R ./tmp/nuxt/* ./tmp/app/nuxt
-  NUXT_TELEMETRY_DISABLED=1 yarn --cwd ./tmp/app/nuxt generate
-  start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' http://127.0.0.1:3000/books/ 'yarn playwright test'
+
+  # Tailwind
+  yarn --cwd ./tmp/app/nuxt add tailwindcss postcss autoprefixer
+  yarn --cwd ./tmp/app/nuxt tailwindcss init -p
+  cp ./templates/common/tailwind.config.js ./tmp/app/nuxt
+  cp ./templates/common/style.css ./tmp/app/nuxt/assets/css
+
+  yarn --cwd ./tmp/app/nuxt generate
+
+  start-server-and-test 'yarn --cwd ./tmp/app/nuxt preview' http://127.0.0.1:3000/books/ 'yarn playwright test'
 fi
 
 if [ "$1" = "vue" ]; then
diff --git a/tests/show.spec.ts b/tests/show.spec.ts
index 99e0c6b1..b269d707 100644
--- a/tests/show.spec.ts
+++ b/tests/show.spec.ts
@@ -9,6 +9,8 @@ test('resource show', async ({ page, within, queries: { getAllByRole, getByRole,
 
   await expect(queryByText('Loading...')).not.toBeVisible();
 
+  await expect(queryByRole('heading', { level: 1 })).toHaveText('Book List');
+
   const listRows = getAllByRole('row');
 
   const { getAllByRole: getAllByRoleWithinListRow } = within(listRows.nth(3));