├── pnpm-workspace.yaml
├── .stackblitzrc
├── public
    ├── nuxt.png
    ├── vite.png
    ├── favicon.ico
    ├── starter_4.png
    ├── primevue-logo.webp
    ├── nuxt-logo.svg
    └── icon-green.svg
├── app
    ├── App.scss
    ├── app.vue
    ├── components
    │   ├── app
    │   │   ├── AppFooter.vue
    │   │   ├── AppTopbar.vue
    │   │   ├── AppColorMode.vue
    │   │   └── AppSidebar.vue
    │   ├── content
    │   │   └── HeroCard.vue
    │   ├── ExternalLink.vue
    │   ├── PageView.vue
    │   ├── AdvertiseBox.vue
    │   ├── ToDo.vue
    │   └── TipTap.vue
    ├── assets
    │   └── sass
    │   │   ├── form.scss
    │   │   ├── sidebar.scss
    │   │   └── main.scss
    ├── stores
    │   ├── cats.ts
    │   ├── counter.ts
    │   ├── data.ts
    │   └── theme.ts
    ├── composables
    │   ├── primeDataTable.ts
    │   ├── messages.ts
    │   ├── navigation.ts
    │   └── confirmation.ts
    ├── pages
    │   ├── templates
    │   │   └── blueprint.vue
    │   ├── data
    │   │   ├── colada.vue
    │   │   ├── server.vue
    │   │   ├── i18n.vue
    │   │   └── stores.vue
    │   ├── cms
    │   │   └── [...slug].vue
    │   ├── ui
    │   │   ├── tiptap.vue
    │   │   ├── icons.vue
    │   │   └── uno.vue
    │   ├── 404.vue
    │   ├── prime
    │   │   ├── messages.vue
    │   │   └── datatable.vue
    │   ├── index.vue
    │   └── form
    │   │   ├── toggle.vue
    │   │   └── index.vue
    ├── layouts
    │   └── default.vue
    └── plugins
    │   └── sidebar.ts
├── i18n
    ├── locales
    │   ├── en.json
    │   └── de.json
    └── i18n.config.ts
├── server
    ├── api
    │   ├── pageview.ts
    │   └── products.ts
    └── middleware
    │   └── log.ts
├── netlify.toml
├── vitest.config.ts
├── eslint.config.js
├── content.config.ts
├── content
    ├── component.md
    └── markdown.md
├── compodium
    ├── examples
    │   └── ToDoExampleHelp.vue
    └── preview.vue
├── nuxt3-primevue-starter.iml
├── tsconfig.json
├── test
    ├── nuxt
    │   ├── ToDo.test.ts
    │   └── ExternalLink.test.ts
    └── basic
    │   └── vitest_base.test.ts
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── main.yml
├── .gitignore
├── nuxt.run.xml
├── formkit.config.ts
├── LICENSE
├── nuxt.config.ts
├── package.json
├── uno.config.ts
├── README.md
└── CHANGELOG.md


/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | shamefullyHoist: true
2 | strictPeerDependencies: false


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |   "installDependencies": true,
3 |   "startCommand": "npm run dev"
4 | }
5 | 


--------------------------------------------------------------------------------
/public/nuxt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/nuxt-primevue-starter/HEAD/public/nuxt.png


--------------------------------------------------------------------------------
/public/vite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/nuxt-primevue-starter/HEAD/public/vite.png


--------------------------------------------------------------------------------
/app/App.scss:
--------------------------------------------------------------------------------
1 | @use 'assets/sass/sidebar';
2 | @use 'assets/sass/form';
3 | @use 'assets/sass/main';
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/nuxt-primevue-starter/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/i18n/locales/en.json:
--------------------------------------------------------------------------------
1 | {
2 |   "welcome": "Welcome",
3 |   "save": "Save",
4 |   "search": "Search"
5 | }
6 | 


--------------------------------------------------------------------------------
/public/starter_4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/nuxt-primevue-starter/HEAD/public/starter_4.png


--------------------------------------------------------------------------------
/i18n/locales/de.json:
--------------------------------------------------------------------------------
1 | {
2 |   "welcome": "Willkommen",
3 |   "save": "Speichern",
4 |   "search": "Suchen"
5 | }
6 | 


--------------------------------------------------------------------------------
/public/primevue-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfxcode/nuxt-primevue-starter/HEAD/public/primevue-logo.webp


--------------------------------------------------------------------------------
/server/api/pageview.ts:
--------------------------------------------------------------------------------
1 | const startAt = Date.now()
2 | let count = 0
3 | 
4 | export default defineEventHandler(() => ({
5 |   pageview: count++,
6 |   startAt,
7 | }))
8 | 


--------------------------------------------------------------------------------
/server/middleware/log.ts:
--------------------------------------------------------------------------------
1 | import { consola } from 'consola'
2 | 
3 | export default defineEventHandler((event) => {
4 |   consola.debug(`New request: ${event.node.req.url}`)
5 | })
6 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 | command = "pnpm run build"
 3 | 
 4 | [build.environment]
 5 | NPM_FLAGS = "--version"
 6 | NODE_VERSION = "20"
 7 | 
 8 | [[redirects]]
 9 | from = "/*"
10 | to = "/index.html"
11 | status = 200
12 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineVitestConfig } from '@nuxt/test-utils/config'
2 | 
3 | export default defineVitestConfig({
4 |   test: {
5 |     environment: 'nuxt',
6 |   },
7 |   // any custom Vitest config you require
8 | })
9 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import antfu from '@antfu/eslint-config'
 3 | import nuxt from './.nuxt/eslint.config.mjs'
 4 | 
 5 | export default antfu(
 6 |   {
 7 |     unocss: true,
 8 |     formatters: true,
 9 |     pnpm: true,
10 |   },
11 | ).append(nuxt())
12 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | useHead({
 3 |   title: 'Nuxt 3 PrimeVue Starter',
 4 | })
 5 | </script>
 6 | 
 7 | <template>
 8 |   <NuxtLayout>
 9 |     <NuxtPage />
10 |   </NuxtLayout>
11 | </template>
12 | 
13 | <style lang='scss'>
14 | @use 'App.scss';
15 | </style>
16 | 


--------------------------------------------------------------------------------
/content.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineContentConfig, defineCollection } from '@nuxt/content'
 2 | 
 3 | export default defineContentConfig({
 4 |     collections: {
 5 |         content: defineCollection({
 6 |             type: 'page',
 7 |             source: '**/*.md'
 8 |         })
 9 |     }
10 | })


--------------------------------------------------------------------------------
/content/component.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Nuxt Content'
 3 | description: 'Component Sample'
 4 | author: 'Tom'
 5 | ---
 6 | 
 7 | ### Navigation
 8 | 
 9 | [Markdown Sample](/cms/markdown)
10 | 
11 | ::heroCard
12 | Hero Component Sample
13 | #description
14 | This will be rendered inside the `description` slot.
15 | ::
16 | 


--------------------------------------------------------------------------------
/compodium/examples/ToDoExampleHelp.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Todo from '@/components/Todo.vue'
 3 | 
 4 | extendCompodiumMeta({
 5 |   defaultProps: {
 6 |     text: 'Help',
 7 |     icon: 'i-mdi-help-circle-outline',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <Todo>Some Help Text</Todo>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/app/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const config = useRuntimeConfig()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="layout-footer mt-4">
 7 |     <span class="font-medium ml-2">{{ config.public.APP_NAME }} - {{ config.public.APP_VERSION }}</span>
 8 |   </div>
 9 | </template>
10 | 
11 | <style lang="scss" scoped></style>
12 | 


--------------------------------------------------------------------------------
/app/components/content/HeroCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h1 class="text-4xl mb-4">
 4 |       <slot>
 5 |         Hero Title
 6 |       </slot>
 7 |     </h1>
 8 |     <span class="text-gray-300">
 9 |       <slot name="description">
10 |         Hero Description
11 |       </slot>
12 |     </span>
13 |   </section>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/assets/sass/form.scss:
--------------------------------------------------------------------------------
 1 | .p-formkit-data-view {
 2 |   .formkit-form {
 3 |     .formkit-outer {
 4 |       padding-bottom: 0.8rem;
 5 |     }
 6 | 
 7 |     &.form-horizontal {
 8 |       padding-bottom: 1.2rem;
 9 |     }
10 | 
11 |     .formkit-help {
12 |       margin: 0;
13 |     }
14 |   }
15 | }
16 | 
17 | .p-formkit-data-debug {
18 |   padding-top: 1rem;
19 | }
20 | 


--------------------------------------------------------------------------------
/app/components/ExternalLink.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | defineProps({
 3 |   text: {
 4 |     type: String,
 5 |     default: 'Nuxt',
 6 |   },
 7 |   href: {
 8 |     type: String,
 9 |     default: 'https://nuxt.com',
10 |   },
11 | })
12 | </script>
13 | 
14 | <template>
15 |   <a v-tooltip.bottom="href" :href="href" target="_blank">{{ text }}</a>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/nuxt3-primevue-starter.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
4 |     <exclude-output />
5 |     <content url="file://$MODULE_DIR$" />
6 |     <orderEntry type="inheritedJdk" />
7 |     <orderEntry type="sourceFolder" forTests="false" />
8 |   </component>
9 | </module>


--------------------------------------------------------------------------------
/app/stores/cats.ts:
--------------------------------------------------------------------------------
 1 | export function useCatsStore() {
 2 |   const staleTime: number = 60 * 1000
 3 | 
 4 |   const { data: catsFacts } = useQuery({
 5 |     key: () => ['cats-facts'],
 6 |     query: () => fetch('https://catfact.ninja/facts').then(res => res.json()).then((res: any) => {
 7 |       return res.data
 8 |     }),
 9 |     staleTime,
10 |   })
11 | 
12 |   return { catsFacts }
13 | }
14 | 


--------------------------------------------------------------------------------
/app/stores/counter.ts:
--------------------------------------------------------------------------------
 1 | export const useCounterStore = defineStore('counter', () => {
 2 |   const count = ref(0)
 3 |   const name = ref('sfxcode')
 4 |   const doubleCount = computed(() => count.value * 2)
 5 |   function increment() {
 6 |     count.value++
 7 |   }
 8 | 
 9 |   watch(name, () => {
10 |     count.value = 0
11 |   })
12 | 
13 |   return { count, name, doubleCount, increment }
14 | })
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // https://nuxt.com/docs/guide/concepts/typescript
 3 |   "files": [],
 4 |   "references": [
 5 |     {
 6 |       "path": "./.nuxt/tsconfig.app.json"
 7 |     },
 8 |     {
 9 |       "path": "./.nuxt/tsconfig.server.json"
10 |     },
11 |     {
12 |       "path": "./.nuxt/tsconfig.shared.json"
13 |     },
14 |     {
15 |       "path": "./.nuxt/tsconfig.node.json"
16 |     }
17 |   ]
18 | }


--------------------------------------------------------------------------------
/app/composables/primeDataTable.ts:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | 
 3 | export function usePrimeDataTable() {
 4 |   const tableData = ref([])
 5 | 
 6 |   const filters = ref({})
 7 |   const dataTableRef = ref()
 8 | 
 9 |   function exportCSV() {
10 |     dataTableRef.value?.exportCSV()
11 |   }
12 | 
13 |   return {
14 |     tableData,
15 |     filters,
16 |     dataTableRef,
17 |     exportCSV,
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/test/nuxt/ToDo.test.ts:
--------------------------------------------------------------------------------
 1 | // @vitest-environment nuxt
 2 | import { mountSuspended } from '@nuxt/test-utils/runtime'
 3 | import { describe, expect, it } from 'vitest'
 4 | import ToDo from '../../app/components/ToDo.vue'
 5 | 
 6 | describe('todo', () => {
 7 |   it('component can be mounted', async () => {
 8 |     const component = await mountSuspended(ToDo)
 9 |     expect(component.html()).toContain('TODO')
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/app/components/PageView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data } = await useFetch('/api/pageview')
 3 | const time = useTimeAgo(computed(() => data.value?.startAt))
 4 | const pageview = data.value?.pageview
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="text-2xl text-gray:80">
 9 |     <span text-gray font-500>{{ pageview }}</span>
10 |     page views since
11 |     <span text-gray>{{ time }}</span>
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/app/pages/templates/blueprint.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | import ToDo from '~/components/ToDo.vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="card">
 7 |     <h2>Blueprint</h2>
 8 |     <p>Use this page to start from scratch and place your custom content !</p>
 9 |     <NuxtLink to="/">
10 |       Home page
11 |     </NuxtLink>
12 |     <div>
13 |       <ToDo text="Work in Progress" />
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <style scoped></style>
19 | 


--------------------------------------------------------------------------------
/compodium/preview.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div id="workspace" class="mt-40">
 7 |     <div class="card">
 8 |       <slot />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <style lang='scss' scoped>
14 | @use '../app/App.scss';
15 | 
16 | #workspace {
17 |   padding-left: 0;
18 |   margin-right: 30px;
19 | }
20 | 
21 | #workspace.collapsed {
22 |   padding-left: 0;
23 | }
24 | 
25 | #workspace.onmobile {
26 |   padding-left: 0;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/app/components/AdvertiseBox.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | defineProps({
 3 |   header: {
 4 |     type: String,
 5 |     required: true,
 6 |   },
 7 |   color: {
 8 |     type: String,
 9 |     default: 'text-primary',
10 |   },
11 | })
12 | </script>
13 | 
14 | <template>
15 |   <div class="mb-4 p-4 px-5 shadow-xs">
16 |     <div :class="`mb-3 text-2xl text-${color}`">
17 |       {{ header }}
18 |     </div>
19 |     <div>
20 |       <slot />
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <style scoped>
26 | 
27 | </style>
28 | 


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const collapsed = useState<boolean>('collapsed')
 3 | const isOnMobile = useState<boolean>('isOnMobile')
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div class="">
 8 |     <ConfirmDialog />
 9 |     <Toast />
10 |     <AppSidebar />
11 |     <div id="workspace" :class="[{ collapsed }, { mobile: isOnMobile }]">
12 |       <AppTopbar />
13 |       <div class="m-1 mt-4">
14 |         <slot />
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <style lang="scss">
21 | 
22 | </style>
23 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: npm # See documentation for possible values
 9 |     directory: / # Location of package manifests
10 |     schedule:
11 |       interval: monthly
12 | 


--------------------------------------------------------------------------------
/app/pages/data/colada.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const { catsFacts } = useCatsStore()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="card">
 7 |     <h2>Pinia Colada</h2>
 8 |     <p>The Data Fetching layer for Pinia</p>
 9 |     <h3>Some facts about cats</h3>
10 |     <div class="pt-4 w-1/2">
11 |       <div v-for="item in catsFacts" :key="item.fact" class="card">
12 |         <h2>{{ item.fact.replace(/ .*/, '') }} ...</h2>
13 |         <span>{{ item.fact }}</span>
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <style scoped></style>
20 | 


--------------------------------------------------------------------------------
/app/assets/sass/sidebar.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:color';
 2 | @use 'vue-sidebar-menu/src/scss/vue-sidebar-menu.scss' with (
 3 |   $primary-color: var(--p-primary-color),
 4 |   $base-bg: #2a2a2e,
 5 |   $item-color: #fff,
 6 |   $item-active-color: var(--p-primary-color),
 7 |   $item-font-size: 14px,
 8 |   $item-line-height: 18px,
 9 |   $item-padding: 8px 14px,
10 |   $icon-height: 32px,
11 |   $icon-width: 32px
12 | );
13 | 
14 | .v-sidebar-menu hr {
15 |   margin-bottom: 8px;
16 |   background-color: rgba(color.adjust(#2a2a2e, $lightness: -5%), 0.5);
17 |   border: 0 none;
18 |   height: 0.1rem;
19 | }
20 | 


--------------------------------------------------------------------------------
/app/components/app/AppTopbar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | function redirectToGithub() {
 3 |   window.open('https://github.com/sfxcode/nuxt3-primevue-starter', '_blank')
 4 | }
 5 | </script>
 6 | 
 7 | <template>
 8 |   <nav>
 9 |     <Toolbar>
10 |       <template #start />
11 | 
12 |       <template #end>
13 |         <AppColorMode class="ml-6 mr-2" />
14 |         <Button icon="pi pi-github" class="mr-2" @click="redirectToGithub" />
15 |         <Button icon="pi pi-sign-out" severity="danger" />
16 |       </template>
17 |     </Toolbar>
18 |   </nav>
19 | </template>
20 | 
21 | <style scoped lang="scss">
22 | 
23 | </style>
24 | 


--------------------------------------------------------------------------------
/app/pages/cms/[...slug].vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const route = useRoute()
 3 | const path = route.path.replace('/cms', '')
 4 | const { data: page } = await useAsyncData(`page-${path}`, () => {
 5 |   return queryCollection('content').path(path).first()
 6 | })
 7 | </script>
 8 | 
 9 | <template>
10 |   <div class="card">
11 |     <h2>{{ page?.title }}</h2>
12 |     <p>{{ page?.description }}</p>
13 |     <p class="font-bold">
14 |       Author: {{ page?.meta.author }}
15 |     </p>
16 |     <hr>
17 | 
18 |     <ContentRenderer v-if="page" :value="page" />
19 | 
20 |     <footer><!-- ... --></footer>
21 |   </div>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/app/components/ToDo.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | defineProps({
 3 |   text: {
 4 |     type: String,
 5 |     default: 'TODO',
 6 |   },
 7 |   icon: {
 8 |     type: String,
 9 |     default: 'i-mdi-information',
10 |   },
11 | })
12 | </script>
13 | 
14 | <template>
15 |   <div>
16 |     <div class="todo m-4 flex gap-2">
17 |       <i :class="icon" class="text-3xl text-primary" />
18 |       <div data-testid="test_todo" class="text-2xl">
19 |         {{ text }}
20 |       </div>
21 |     </div>
22 |     <div class="m-2 p-2">
23 |       <slot>
24 |         TODO
25 |       </slot>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <style scoped>
31 | 
32 | </style>
33 | 


--------------------------------------------------------------------------------
/app/pages/data/server.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | import { useCounter } from '#imports'
 3 | 
 4 | const count = useCounter()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="card">
 9 |     <h2>Server API Usage</h2>
10 |     <PageView />
11 |     <h2>Counter (useState)</h2>
12 | 
13 |     <div class="mt-8 grid grid-cols-3 w-80">
14 |       <Button icon="pi pi-plus" class="p-button-info p-button-rounded" @click="count.inc()" />
15 |       <span class="text-4xl">{{ count.count }}</span>
16 |       <Button icon="pi pi-minus" class="p-button-rounded p-button-success" @click="count.dec()" />
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <style scoped></style>
22 | 


--------------------------------------------------------------------------------
/app/plugins/sidebar.ts:
--------------------------------------------------------------------------------
 1 | import type { Component } from 'vue'
 2 | import { NuxtLink } from '#components'
 3 | import { h } from 'vue'
 4 | import VueSidebarMenu from 'vue-sidebar-menu'
 5 | 
 6 | export default defineNuxtPlugin((nuxtApp) => {
 7 |   const nuxtLink: Component = {
 8 |     name: 'CustomLink',
 9 |     props: ['item'],
10 |     render() {
11 |       return h(NuxtLink, this.$slots.default)
12 |     },
13 |     watch: {
14 |       '$page.url': function () {
15 |         this.onRouteChange()
16 |       },
17 |     },
18 |     inject: ['onRouteChange'],
19 |   }
20 |   nuxtApp.vueApp.use(VueSidebarMenu)
21 |   nuxtApp.vueApp.component('nuxt-sidebar-link', nuxtLink)
22 | })
23 | 


--------------------------------------------------------------------------------
/app/stores/data.ts:
--------------------------------------------------------------------------------
 1 | import { consola } from 'consola'
 2 | import { acceptHMRUpdate, defineStore } from 'pinia'
 3 | 
 4 | export const useDataStore = defineStore('data', {
 5 | 
 6 |   state: () => ({
 7 |     appVersion: useRuntimeConfig().public.APP_VERSION,
 8 |     products: [],
 9 |   }),
10 |   actions: {
11 |     async initData() {
12 |       if (this.products.length === 0) {
13 |         consola.debug('fetching data ...')
14 |         await fetch('/api/products').then(res => res.json()).then((d) => {
15 |           this.products = d.data
16 |         }).catch(error => consola.error(error))
17 |       }
18 |     },
19 |   },
20 | 
21 | })
22 | 
23 | if (import.meta.hot)
24 |   import.meta.hot.accept(acceptHMRUpdate(useDataStore, import.meta.hot))
25 | 


--------------------------------------------------------------------------------
/app/pages/data/i18n.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const { d, t, n, locale, locales, setLocale } = useI18n()
 3 | const testDate = new Date()
 4 | const testNumber = 42.4242
 5 | 
 6 | const availableLocales = computed(() => {
 7 |   return locales.value?.filter(l => l.code !== locale.value)
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <div class="card">
13 |     <h2>Localization</h2>
14 |     Switch Locale to
15 |     <a
16 |       v-for="currentLocale in availableLocales"
17 |       :key="currentLocale.code"
18 |       href="#"
19 |       @click.prevent.stop="setLocale(currentLocale.code)"
20 |     >{{ currentLocale.name }}</a>
21 |     <p>{{ t('save') }}</p>
22 |     <p>{{ d(testDate, 'short') }}</p>
23 |     <p>{{ n(testNumber, 'currency') }}</p>
24 |   </div>
25 | </template>
26 | 
27 | <style scoped></style>
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | 
 4 | # Logs
 5 | *.log*
 6 | 
 7 | # Temp directories
 8 | .temp
 9 | .tmp
10 | .cache
11 | 
12 | # Yarn
13 | **/.yarn/cache
14 | **/.yarn/*state*
15 | 
16 | # Generated dirs
17 | dist
18 | 
19 | # Nuxt
20 | .nuxt
21 | .output
22 | .data
23 | .vercel_build_output
24 | .build-*
25 | .netlify
26 | 
27 | # Env
28 | .env
29 | 
30 | # Testing
31 | reports
32 | coverage
33 | *.lcov
34 | .nyc_output
35 | 
36 | # VSCode
37 | .vscode/*
38 | !.vscode/settings.json
39 | !.vscode/tasks.json
40 | !.vscode/launch.json
41 | !.vscode/extensions.json
42 | !.vscode/*.code-snippets
43 | .history
44 | 
45 | # Intellij idea
46 | *.iml
47 | .idea
48 | 
49 | # OSX
50 | .DS_Store
51 | .AppleDouble
52 | .LSOverride
53 | .AppleDB
54 | .AppleDesktop
55 | Network Trash Folder
56 | Temporary Items
57 | .apdisk
58 | 
59 | .wrangler


--------------------------------------------------------------------------------
/content/markdown.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Nuxt Content'
 3 | description: 'Markdown Sample Page'
 4 | author: 'Tom'
 5 | ---
 6 | 
 7 | Hello World Form **Nuxt Content V2**
 8 | 
 9 | ### Navigation
10 | 
11 | [Component Sample](/cms/component)
12 | 
13 | ### Code
14 | 
15 | ```typescript
16 | import { useDataStore, useThemeStore } from '@/stores'
17 | const themeStore = useThemeStore()
18 | const dataStore = useDataStore()
19 | 
20 | onMounted(async () => {
21 |   await dataStore.initData()
22 | })
23 | ```
24 | 
25 | ### List
26 | 
27 | 1. Vue
28 | 2. Nuxt
29 | 3. PrimeVue
30 | 4. ...
31 | 
32 | ### Table
33 | 
34 | | Key      | Type      | Description     |
35 | |:---------|:----------|:----------------|
36 | | 1        | Wonderful | Table           |
37 | | 2        | Complete  | Data            |
38 | | 3        | Cool      | Website         |
39 | 


--------------------------------------------------------------------------------
/nuxt.run.xml:
--------------------------------------------------------------------------------
 1 | <component name="ProjectRunConfigurationManager">
 2 |     <configuration default="false" name="client: chrome" type="JavascriptDebugType" uri="http://localhost:3000" useFirstLineBreakpoints="true">
 3 |         <method v="2" />
 4 |     </configuration>
 5 | 
 6 |     <configuration default="false" name="server: nuxt" type="NodeJSConfigurationType" application-parameters="dev" path-to-js-file="$PROJECT_DIR$/node_modules/nuxi/bin/nuxi.mjs" working-dir="$PROJECT_DIR$">
 7 |         <method v="2" />
 8 |     </configuration>
 9 | 
10 |     <configuration default="false" name="fullstack: nuxt" type="CompoundRunConfigurationType">
11 |         <toRun name="client: chrome" type="JavascriptDebugType" />
12 |         <toRun name="server: nuxt" type="NodeJSConfigurationType" />
13 |         <method v="2" />
14 |     </configuration>
15 | </component>
16 | 


--------------------------------------------------------------------------------
/app/pages/ui/tiptap.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import TipTap from '~/components/TipTap.vue'
 3 | 
 4 | const startText = '<p>I’m running <strong>Tiptap</strong> with <strong>Vue.js</strong> and <strong>Nuxt</strong>. 🎉</p><hr><blockquote><p>Use TipTap ...</p></blockquote>\n'
 5 | const editorValue = ref(startText)
 6 | 
 7 | function resetText() {
 8 |   editorValue.value = startText
 9 | }
10 | </script>
11 | 
12 | <template>
13 |   <div class="card">
14 |     <h2>TipTap as alternative Editor</h2>
15 | 
16 |     <div class="pb-2">
17 |       <Button size="small" label="Reset" @click="resetText" />
18 |     </div>
19 |     <div class="p-tiptap">
20 |       <TipTap v-model="editorValue" />
21 |     </div>
22 |     <div class="pt-8">
23 |       <pre v-if="false">{{ editorValue }}</pre>
24 |     </div>
25 |   </div>
26 | </template>
27 | 
28 | <style lang='scss'>
29 | 
30 | </style>
31 | 


--------------------------------------------------------------------------------
/app/pages/404.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const router = useRouter()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="card">
 7 |     <div class="mt-10 text-center col-12">
 8 |       <img src="/nuxt-logo.svg" alt="Nuxt logo" class="mb-5" style="width:81px; height:60px;">
 9 |     </div>
10 |     <main class="text-8xl text-teal-700 px-4 py-10 text-center">
11 |       <div>
12 |         <p class="text-8xl text-red-600">
13 |           <span class="i-codicon-error inline-block" />
14 |         </p>
15 |       </div>
16 |     </main>
17 |     <div style="alignment: center">
18 |       <h1 class="text-2xl text-5xl font-bold text-center">
19 |         Page not found ...
20 |       </h1>
21 |       <div class="mt-5 text-center col-12">
22 |         <Button icon="pi pi-arrow-left" label="Back to home" @click="router.push('/')" />
23 |       </div>
24 |     </div>
25 |   </div>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/app/stores/theme.ts:
--------------------------------------------------------------------------------
 1 | import { acceptHMRUpdate, defineStore } from 'pinia'
 2 | 
 3 | export function updateTheme(themeName: string, themeColor: string) {
 4 |   return `/themes/${themeName}-${themeColor}/theme.css`
 5 | }
 6 | 
 7 | export const useThemeStore = defineStore('theme', {
 8 |   // a function that returns a fresh state
 9 |   state: () => ({
10 |     themeName: 'aura',
11 |     themeColor: 'green',
12 |   }),
13 |   // optional getters
14 |   getters: {
15 |     theme: (state) => {
16 |       return `${state.themeName}-${state.themeColor}`
17 |     },
18 |   },
19 |   // optional actions
20 |   actions: {
21 |     setTheme(themeName: string) {
22 |       this.themeName = themeName
23 |     },
24 |     setColor(colorName: string) {
25 |       this.themeColor = colorName
26 |     },
27 |   },
28 | })
29 | 
30 | if (import.meta.hot)
31 |   import.meta.hot.accept(acceptHMRUpdate(useThemeStore, import.meta.hot))
32 | 


--------------------------------------------------------------------------------
/test/nuxt/ExternalLink.test.ts:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import { describe, expect, it } from 'vitest'
 3 | import ExternalLink from '../../app/components/ExternalLink.vue'
 4 | 
 5 | describe('externalLink', () => {
 6 |   it('renders link with correct text and href', () => {
 7 |     const wrapper = mount(ExternalLink, {
 8 |       props: {
 9 |         text: 'PrimeVue',
10 |         href: 'https://primevue.org/setup/',
11 |       },
12 |     })
13 |     const a = wrapper.find('a')
14 |     expect(a.exists()).toBe(true)
15 |     expect(a.text()).toBe('PrimeVue')
16 |     expect(a.attributes('href')).toBe('https://primevue.org/setup/')
17 |     expect(a.attributes('target')).toBe('_blank')
18 |   })
19 | 
20 |   it('renders default props', () => {
21 |     const wrapper = mount(ExternalLink)
22 |     const a = wrapper.find('a')
23 |     expect(a.text()).toBe('Nuxt')
24 |     expect(a.attributes('href')).toBe('https://nuxt.com')
25 |   })
26 | })
27 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: ci
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 |     branches:
 9 |       - main
10 | 
11 | jobs:
12 |   lint:
13 |     runs-on: ubuntu-latest
14 | 
15 |     steps:
16 |       - uses: actions/checkout@v4
17 |       - run: npm i -g --force corepack && corepack enable
18 |       - uses: actions/setup-node@v4
19 |         with:
20 |           node-version: 20
21 |           cache: "pnpm"
22 | 
23 |       - run: pnpm install
24 |       
25 |       - run: pnpm build
26 |       
27 |       - run: pnpm lint
28 | 
29 |   test:
30 |     runs-on: ubuntu-latest
31 | 
32 |     steps:
33 |       - uses: actions/checkout@v4
34 |       - run: npm i -g --force corepack && corepack enable
35 |       - uses: actions/setup-node@v4
36 |         with:
37 |           node-version: 20
38 |           cache: "pnpm"
39 |      
40 |       - run: pnpm install
41 | 
42 |       - run: pnpm build
43 | 
44 |       - name: Test
45 |         run: pnpm test:ci
46 | 


--------------------------------------------------------------------------------
/formkit.config.ts:
--------------------------------------------------------------------------------
 1 | // formkit.config.ts
 2 | import type { DefaultConfigOptions } from '@formkit/vue'
 3 | import { createAutoAnimatePlugin } from '@formkit/addons'
 4 | import { de, en } from '@formkit/i18n'
 5 | import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
 6 | import { addPrimeAsteriskPlugin } from '@sfxcode/formkit-primevue/plugins'
 7 | 
 8 | const config: DefaultConfigOptions = {
 9 |   locales: { en, de },
10 |   // Define the active locale
11 |   locale: 'en',
12 |   inputs: { ...primeInputs, ...primeOutputs },
13 | 
14 |   plugins: [
15 |     createAutoAnimatePlugin(
16 |       {
17 |         /* optional AutoAnimate config */
18 |         // default:
19 |         duration: 250,
20 |         easing: 'ease-in-out',
21 |       },
22 |       {
23 |         /* optional animation targets object */
24 |         // default:
25 |         global: ['outer', 'inner'],
26 |         form: ['form'],
27 |         repeater: ['items'],
28 |       },
29 |     ),
30 |     addPrimeAsteriskPlugin,
31 |   ],
32 | }
33 | 
34 | export default config
35 | 


--------------------------------------------------------------------------------
/test/basic/vitest_base.test.ts:
--------------------------------------------------------------------------------
 1 | import { assert, expect, it } from 'vitest'
 2 | 
 3 | // Edit an assertion and save to see HMR in action
 4 | 
 5 | it('math.sqrt()', () => {
 6 |   expect(Math.sqrt(4)).toBe(2)
 7 |   expect(Math.sqrt(144)).toBe(12)
 8 |   expect(Math.sqrt(2)).toBe(Math.SQRT2)
 9 | })
10 | 
11 | it('jSON', () => {
12 |   const input = {
13 |     foo: 'hello',
14 |     bar: 'world',
15 |   }
16 | 
17 |   const output = JSON.stringify(input)
18 | 
19 |   expect(output).eq('{"foo":"hello","bar":"world"}')
20 |   assert.deepEqual(JSON.parse(output), input, 'matches original')
21 | })
22 | 
23 | it('array operations', () => {
24 |   const arr = [1, 2, 3, 4]
25 |   expect(arr.length).toBe(4)
26 |   expect(arr.includes(2)).toBe(true)
27 |   expect(arr.map(x => x * 2)).toEqual([2, 4, 6, 8])
28 | })
29 | 
30 | it('string manipulation', () => {
31 |   const str = 'NuxtPrimeVue'
32 |   expect(str.toLowerCase()).toBe('nuxtprimevue')
33 |   expect(str.replace('Prime', '-')).toBe('Nuxt-Vue')
34 |   expect(str.split('V')).toEqual(['NuxtPrime', 'ue'])
35 | })
36 | 


--------------------------------------------------------------------------------
/app/pages/ui/icons.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | 
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="card">
 7 |     <h2>Icons by UnoCSS</h2>
 8 |     <div class="i-logos-vue text-6xl" />
 9 |     <h3>Iconset: MDI</h3>
10 |     <div class="mt-6 grid grid-cols-3">
11 |       <div class="i-mdi-information text-green-600-500-500 text-4xl" />
12 |       <div class="i-mdi-alarm text-4xl text-blue-500" />
13 |       <div class="i-mdi-github-circle text-4xl text-purple-500" />
14 |     </div>
15 |     <h3>Iconset: TWEMOJI</h3>
16 |     <div class="mt-6 grid grid-cols-3">
17 |       <div class="i-twemoji-1st-place-medal text-4xl" />
18 |       <div class="i-twemoji-2nd-place-medal text-4xl" />
19 |       <div class="i-twemoji-3rd-place-medal text-4xl" />
20 |     </div>
21 |     <h3>Iconset: Prime</h3>
22 |     <div class="mt-6 grid grid-cols-3">
23 |       <div class="i-prime-home text-4xl" />
24 |       <div class="i-prime-comments text-4xl text-green-400" />
25 |       <div class="i-prime-check-circle" />
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <style scoped></style>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 sfxcode
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/public/nuxt-logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z" fill="#00DC82"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/icon-green.svg:
--------------------------------------------------------------------------------
1 | <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z" fill="#00DC82"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/app/composables/messages.ts:
--------------------------------------------------------------------------------
 1 | import type { ToastMessageOptions } from 'primevue/toast'
 2 | import { useToast } from '#imports'
 3 | 
 4 | export enum MessageSeverity {
 5 |   SUCCESS = 'success',
 6 |   INFO = 'info',
 7 |   WARN = 'warn',
 8 |   ERROR = 'error',
 9 | }
10 | 
11 | export function useMessages() {
12 |   const toast = useToast()
13 | 
14 |   function showMessage(severity: ToastMessageOptions['severity'], summary: string, detail: string, life: number = 3000) {
15 |     toast.add({ severity, summary, detail, life })
16 |   }
17 | 
18 |   function showSuccessMessage(summary: string, detail: string = summary, life: number = 3000) {
19 |     showMessage(MessageSeverity.SUCCESS, summary, detail, life)
20 |   }
21 | 
22 |   function showInfoMessage(summary: string, detail: string = summary, life: number = 3000) {
23 |     showMessage(MessageSeverity.INFO, summary, detail, life)
24 |   }
25 | 
26 |   function showWarnMessage(summary: string, detail: string = summary, life: number = 3000) {
27 |     showMessage(MessageSeverity.WARN, summary, detail, life)
28 |   }
29 | 
30 |   function showErrorMessage(summary: string, detail: string = summary, life: number = 3000) {
31 |     showMessage(MessageSeverity.ERROR, summary, detail, life)
32 |   }
33 | 
34 |   return { showSuccessMessage, showInfoMessage, showWarnMessage, showErrorMessage }
35 | }
36 | 


--------------------------------------------------------------------------------
/app/components/app/AppColorMode.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const mode = useColorMode({
 3 |   emitAuto: true,
 4 |   modes: {
 5 |     contrast: 'dark contrast',
 6 |     cafe: 'cafe',
 7 |   },
 8 | })
 9 | 
10 | const modes = ['dark', 'light', 'auto']
11 | // const allModes = [...modes, 'cafe', 'contrast']
12 | 
13 | const { state, next } = useCycleList(modes, { initialValue: mode })
14 | 
15 | watchEffect(() => mode.value = state.value)
16 | </script>
17 | 
18 | <template>
19 |   <div>
20 |     <client-only>
21 |       <Button @click="next()">
22 |         <i v-if="mode === 'dark'" i-carbon-moon align-middle inline-block class="align-middle" />
23 |         <i v-if="mode === 'light'" i-carbon-sun align-middle inline-block class="align-middle" />
24 |         <i v-if="mode === 'cafe'" i-carbon-cafe align-middle inline-block class="align-middle" />
25 |         <i v-if="mode === 'contrast'" i-carbon-contrast align-middle inline-block class="align-middle" />
26 |         <i v-if="mode === 'auto'" i-carbon-laptop align-middle inline-block class="align-middle" />
27 |         <span class="ml-2 capitalize">{{ mode }}</span>
28 |       </Button>
29 |     </client-only>
30 |   </div>
31 | </template>
32 | 
33 | <style>
34 | html.cafe {
35 |   filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
36 | }
37 | html.contrast {
38 |   filter: contrast(2);
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/app/pages/data/stores.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const themeStore = useThemeStore()
 3 | const dataStore = useDataStore()
 4 | const counterStore = useCounterStore()
 5 | 
 6 | onMounted(async () => {
 7 |   await dataStore.initData()
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <div class="card">
13 |     <h2>Store Settings</h2>
14 |     <h5>
15 |       Primevue Theme Store
16 |     </h5>
17 |     <div class="gap-4 grid grid-cols-2">
18 |       <div>Theme Name</div>
19 |       <div>{{ themeStore.themeName }}</div>
20 |       <div>Theme Color</div>
21 |       <div>{{ themeStore.themeColor }}</div>
22 |     </div>
23 | 
24 |     <h5>
25 |       Data Store (Option Store)
26 |     </h5>
27 |     <span class="text-xs">Example of a Data Store</span>
28 |     <div class="mt-6 gap-4 grid grid-cols-2">
29 |       <div>Products</div>
30 |       <div>{{ dataStore.products.length }}</div>
31 |     </div>
32 | 
33 |     <h5>
34 |       Counter Store (Setup Store)
35 |     </h5>
36 |     <span class="text-xs">Example of a Data Store</span>
37 |     <div class="mt-6">
38 |       <div>
39 |         <InputText v-model="counterStore.name" />
40 |       </div>
41 |     </div>
42 |     <div class="mt-3">
43 |       {{ counterStore.name }} clicked {{ counterStore.count }} times. Doubled value: {{ counterStore.doubleCount }}
44 |     </div>
45 |     <div class="mt-3">
46 |       <Button :label="counterStore.name" @click="counterStore.increment()" />
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <style lang='scss' scoped>
52 | h5 {
53 |   color: var(--p-primary-color);
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/app/assets/sass/main.scss:
--------------------------------------------------------------------------------
 1 | $borderRadius: 12px;
 2 | 
 3 | :root {
 4 |   font-family: Inter;
 5 | }
 6 | 
 7 | html {
 8 |   font-size: 16px;
 9 | }
10 | 
11 | body {
12 |   margin: 1rem;
13 | }
14 | 
15 | // Header
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6 {
22 |   font-weight: 500;
23 |   margin: 1.5rem 0 1rem 0;
24 |   line-height: 1.2;
25 |   &:first-child {
26 |     margin-top: 0;
27 |   }
28 | }
29 | h1 {
30 |   font-size: 1.5rem;
31 |   margin-bottom: 0;
32 |   line-height: 1;
33 | }
34 | h2 {
35 |   font-size: 1.25rem;
36 | }
37 | h3 {
38 |   font-size: 1.25rem;
39 | }
40 | h4 {
41 |   font-size: 1.125rem;
42 | }
43 | h5 {
44 |   font-size: 1rem;
45 | }
46 | h6 {
47 |   font-size: 0.875rem;
48 | }
49 | 
50 | #workspace {
51 |   padding-left: 200px;
52 |   a {
53 |     text-decoration: none;
54 |     color: var(--p-primary-color);
55 |   }
56 | 
57 |   a:hover {
58 |     border-bottom: 1px solid var(--p-primary-color);
59 |     padding-bottom: 2px;
60 |   }
61 | }
62 | 
63 | #workspace.collapsed {
64 |   padding-left: 60px;
65 | }
66 | 
67 | #workspace.onmobile {
68 |   padding-left: 60px;
69 | }
70 | 
71 | @media (min-width: 1024px) {
72 |   .top-navbar {
73 |     display: inline-flex !important;
74 |   }
75 | }
76 | 
77 | .card {
78 |   padding: 1rem;
79 |   color: var(--p-text-color);
80 |   margin-bottom: 1rem;
81 |   border-radius: $borderRadius;
82 |   box-shadow:
83 |     0 3px 5px rgba(0, 0, 0, 0.02),
84 |     0 0 2px rgba(0, 0, 0, 0.05),
85 |     0 1px 4px rgba(0, 0, 0, 0.08) !important;
86 | 
87 |   h2 {
88 |     color: var(--p-primary-color);
89 |   }
90 | }
91 | 
92 | .p-tiptap {
93 |   strong {
94 |     color: var(--p-primary-color);
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/app/pages/ui/uno.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts' xmlns:all="http://www.w3.org/1999/xhtml">
 2 | const config = useRuntimeConfig()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="card">
 7 |     <h2>UnoCSS</h2>
 8 |     <div text-center flex h-full select-none all:transition-400>
 9 |       <div ma>
10 |         <div animate-5s text-6xl fw100 font-bold animate-bounce-alt animate-count-infinite>
11 |           unocss
12 |         </div>
13 |         <div text-lg fw300 m1 dark:op30>
14 |           The instant on-demand Atomic CSS engine.
15 |         </div>
16 |         <div
17 | 
18 |           text-2xl m2 flex justify-center dark:op30
19 |           hover="op80"
20 |         >
21 |           <a
22 | 
23 |             i-mdi-github-circle text-8xl text-inherit
24 |             href="https://github.com/antfu/unocss"
25 |             target="_blank"
26 |           />
27 |         </div>
28 |       </div>
29 |     </div>
30 |     <div
31 | 
32 |       fw300 text-center bottom-5 left-0 right-0 dark:op30
33 |     >
34 |       on-demand · instant · fully customizable
35 |     </div>
36 | 
37 |     <client-only>
38 |       <div v-if="'development' === config.public.APP_MODE">
39 |         <h4 pt-30>
40 |           Inspector
41 |         </h4>
42 |         <div pb-4>
43 |           <span>Only visible in Development mode - click info icon below</span>
44 |         </div>
45 |         <a href="../__unocss" target="_blank">
46 |           <div class="i-mdi-information text-green-600-500-500 text-4xl" />
47 |         </a>
48 |         <article class="prose-truegray text-base pt-4 prose xl:text-xl">
49 |           View, play and analyse rules and setup ...
50 |         </article>
51 |       </div>
52 |     </client-only>
53 |   </div>
54 | </template>
55 | 
56 | <style scoped></style>
57 | 


--------------------------------------------------------------------------------
/app/composables/navigation.ts:
--------------------------------------------------------------------------------
 1 | export function useNavigationMenu() {
 2 |   const separator = h('hr')
 3 | 
 4 |   const menu = computed(() => {
 5 |     return [
 6 |       {
 7 |         href: '/',
 8 |         title: 'Home',
 9 |         icon: 'pi pi-fw pi-home',
10 |       },
11 |       {
12 |         component: markRaw(separator),
13 |       },
14 |       {
15 |         title: 'PrimeVue',
16 |         icon: 'pi pi-prime',
17 |         child: [
18 |           { href: '/prime/datatable', title: 'DataTable' },
19 |           { href: '/prime/messages', title: 'Messages' },
20 |         ],
21 |       },
22 |       {
23 |         title: 'Forms',
24 |         icon: 'pi pi-check-square',
25 |         child: [
26 |           { href: '/form', title: 'Basic' },
27 |           { href: '/form/toggle', title: 'Edit / View' },
28 |         ],
29 |       },
30 |       {
31 |         title: 'UI',
32 |         icon: 'pi pi-image',
33 |         child: [
34 |           { href: '/ui/uno', title: 'UnoCSS' },
35 |           { href: '/ui/icons', title: 'Icons' },
36 |           { href: '/ui/tiptap', title: 'TipTap' },
37 |         ],
38 |       },
39 |       {
40 |         title: 'Data',
41 |         icon: 'pi pi-server',
42 |         child: [
43 |           { href: '/data/stores', title: 'Pinia Stores' },
44 |           { href: '/data/colada', title: 'Pinia Colada' },
45 |           { href: '/data/i18n', title: 'Localization' },
46 |           { href: '/data/server', title: 'Server' },
47 |         ],
48 |       },
49 |       {
50 |         title: 'Content',
51 |         icon: 'pi pi-book',
52 |         child: [
53 |           { href: '/cms/markdown', title: 'Markdown' },
54 |           { href: '/cms/component', title: 'Component' },
55 |         ],
56 |       },
57 | 
58 |     ]
59 |   })
60 | 
61 |   return { menu }
62 | }
63 | 


--------------------------------------------------------------------------------
/app/composables/confirmation.ts:
--------------------------------------------------------------------------------
 1 | import { useConfirm } from '#imports'
 2 | 
 3 | export function useConfirmation() {
 4 |   const confirm = useConfirm()
 5 |   const { showSuccessMessage, showInfoMessage } = useMessages()
 6 | 
 7 |   // eslint-disable-next-line unused-imports/no-unused-vars
 8 |   function doNothing(id: any) {
 9 |   }
10 | 
11 |   function confirmDelete(idToDelete: any, acceptCallback: (id: any) => void, rejectCallback: (id: any) => void = doNothing) {
12 |     confirm.require({
13 |       message: 'Should this entry be deleted ?',
14 |       header: 'Are you sure',
15 |       icon: 'pi pi-info-circle',
16 |       rejectLabel: 'Cancel',
17 |       acceptLabel: 'Delete',
18 |       rejectClass: 'p-button-secondary p-button-outlined',
19 |       acceptClass: 'p-button-danger',
20 |       accept: () => {
21 |         showSuccessMessage('Action confirmed', `Entry with ID ${idToDelete} was deleted`)
22 |         acceptCallback(idToDelete)
23 |       },
24 |       reject: () => {
25 |         showInfoMessage('Action cancelled', 'No changes are processed')
26 |         rejectCallback(idToDelete)
27 |       },
28 |     })
29 |   }
30 | 
31 |   function confirmAction(acceptCallback: () => void, acceptMessage: string = 'Action confirmed', acceptMessageDetail: string = acceptMessage, header: string = 'Attention', message: string = 'Should proceed with this action ?') {
32 |     confirm.require({
33 |       message,
34 |       header,
35 |       icon: 'pi pi-info-circle',
36 |       rejectLabel: 'Cancel',
37 |       acceptLabel: 'Accept',
38 |       rejectClass: 'p-button-secondary p-button-outlined',
39 |       acceptClass: 'p-button-success',
40 |       accept: () => {
41 |         acceptCallback()
42 |         showInfoMessage(acceptMessage, acceptMessageDetail)
43 |       },
44 |       reject: () => {
45 |         showInfoMessage('Action cancelled')
46 |       },
47 |     })
48 |   }
49 | 
50 |   return { confirmDelete, confirmAction }
51 | }
52 | 


--------------------------------------------------------------------------------
/app/pages/prime/messages.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { showSuccessMessage, showInfoMessage, showWarnMessage, showErrorMessage } = useMessages()
 3 | const { confirmAction, confirmDelete } = useConfirmation()
 4 | 
 5 | const lastDeletedId = ref(0)
 6 | 
 7 | function doSomeAction() {
 8 |   // do something
 9 | }
10 | 
11 | function doSomeDeleteAction(idToDelete: number) {
12 |   // do something
13 |   lastDeletedId.value = idToDelete
14 | }
15 | </script>
16 | 
17 | <template>
18 |   <div class="card">
19 |     <h2>PrimeVue Toast Demo</h2>
20 |     <div class="flex flex-row gap-4">
21 |       <div>
22 |         <Button label="Success" class="p-button-success" @click="showSuccessMessage('Success Message', 'Message Content')" />
23 |       </div>
24 |       <div>
25 |         <Button label="Info" class="p-button-info" @click="showInfoMessage('Info Message', 'Message Content')" />
26 |       </div>
27 |       <div>
28 |         <Button label="Warn" class="p-button-warning" @click="showWarnMessage('Warn Message', 'Message Content')" />
29 |       </div>
30 |       <div>
31 |         <Button label="Error" class="p-button-danger" @click="showErrorMessage('Error Message', 'Message Content')" />
32 |       </div>
33 |     </div>
34 |     <h2>Confirmation</h2>
35 |     <div class="flex flex-row gap-4">
36 |       <Button label="Trigger action with confirmation" class="p-button-info" @click="confirmAction(doSomeAction)" />
37 |       <Button label="Trigger delete action with confirmation" class="p-button-danger" @click="confirmDelete(1, doSomeDeleteAction)" />
38 |     </div>
39 |     <h2>Messages</h2>
40 |     <div class="flex flex-row flex-wrap gap-4">
41 |       <Message severity="success">
42 |         Success Message Content
43 |       </Message>
44 |       <Message severity="info">
45 |         Info Message Content
46 |       </Message>
47 |       <Message severity="warn">
48 |         Warning Message Content
49 |       </Message>
50 |       <Message severity="error">
51 |         Error Message Content
52 |       </Message>
53 |     </div>
54 |   </div>
55 | </template>
56 | 
57 | <style scoped></style>
58 | 


--------------------------------------------------------------------------------
/app/components/app/AppSidebar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const config = useRuntimeConfig()
 3 | const { menu } = useNavigationMenu()
 4 | 
 5 | const collapsed = useState<boolean>('collapsed')
 6 | const isOnMobile = useState<boolean>('isOnMobile')
 7 | 
 8 | function onResize() {
 9 |   if (window.innerWidth <= 980) {
10 |     collapsed.value = true
11 |     isOnMobile.value = true
12 |   }
13 |   else {
14 |     collapsed.value = false
15 |     isOnMobile.value = false
16 |   }
17 | }
18 | 
19 | function onToggleCollapse() {
20 | }
21 | 
22 | function onItemClick() {
23 | }
24 | 
25 | onMounted(() => {
26 |   onResize()
27 |   window.addEventListener('resize', onResize)
28 | })
29 | </script>
30 | 
31 | <template>
32 |   <div>
33 |     <sidebar-menu
34 |       v-model:collapsed="collapsed"
35 |       link-component-name="nuxt-sidebar-link"
36 |       :menu="menu"
37 |       :show-one-child="true"
38 |       width="200px"
39 |       width-collapsed="60px"
40 |       @update:collapsed="onToggleCollapse"
41 |       @item-click="onItemClick"
42 |     >
43 |       <template #header>
44 |         <div v-if="!collapsed" class="flex">
45 |           <img class="m-6 w-8" src="/primevue-logo.webp" alt="PrimeVue">
46 |           <img class="m-6 w-8" src="/nuxt-logo.svg" alt="Nuxt">
47 |         </div>
48 |         <div v-else>
49 |           <img class="ml-4 mt-6 w-6" src="/primevue-logo.webp" alt="PrimeVue">
50 |           <img class="ml-4 mt-2 w-6" src="/nuxt-logo.svg" alt="Nuxt">
51 |         </div>
52 |       </template>
53 |       <template #footer>
54 |         <div class="text-xs text-color-primary m-2 text-center">
55 |           <span v-if="!collapsed">PrimeVue-Nuxt Starter {{ config.public.APP_VERSION }}</span>
56 |           <span v-if="collapsed">{{ config.public.APP_VERSION }}</span>
57 |         </div>
58 |       </template>
59 |     </sidebar-menu>
60 |     <div
61 |       v-if="isOnMobile && !collapsed"
62 |       class="sidebar-overlay"
63 |       @click="collapsed = true"
64 |     />
65 |   </div>
66 | </template>
67 | 
68 | <style lang="scss">
69 | .sidebar-overlay {
70 |   position: fixed;
71 |   width: 100%;
72 |   height: 100%;
73 |   top: 0;
74 |   left: 0;
75 |   background-color: #000;
76 |   opacity: 0.5;
77 |   z-index: 900;
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/i18n/i18n.config.ts:
--------------------------------------------------------------------------------
  1 | export default defineI18nConfig(() => ({
  2 |   numberFormats: {
  3 | 
  4 |     en: {
  5 |       decimal: {
  6 |         style: 'decimal',
  7 |         minimumFractionDigits: 2,
  8 |         maximumFractionDigits: 2,
  9 |       },
 10 |       short: {
 11 |         style: 'decimal',
 12 |         minimumFractionDigits: 0,
 13 |         maximumFractionDigits: 0,
 14 |       },
 15 |       percent: {
 16 |         style: 'percent',
 17 |         minimumFractionDigits: 2,
 18 |         useGrouping: false,
 19 |       },
 20 |       currency: {
 21 |         style: 'currency',
 22 |         minimumFractionDigits: 2,
 23 |         maximumFractionDigits: 2,
 24 |         currency: 'USD',
 25 |       },
 26 |     },
 27 |     de: {
 28 |       decimal: {
 29 |         style: 'decimal',
 30 |         minimumFractionDigits: 2,
 31 |         maximumFractionDigits: 2,
 32 |       },
 33 |       short: {
 34 |         style: 'decimal',
 35 |         minimumFractionDigits: 0,
 36 |         maximumFractionDigits: 0,
 37 |       },
 38 |       percent: {
 39 |         style: 'percent',
 40 |         minimumFractionDigits: 2,
 41 |         useGrouping: false,
 42 |       },
 43 |       currency: {
 44 |         style: 'currency',
 45 |         minimumFractionDigits: 2,
 46 |         maximumFractionDigits: 2,
 47 |         currency: 'EUR',
 48 |       },
 49 |     },
 50 |   },
 51 |   datetimeFormats: {
 52 |     en: {
 53 |       short: {
 54 |         year: 'numeric',
 55 |         month: '2-digit',
 56 |         day: '2-digit',
 57 |       },
 58 |       rangeYear: {
 59 |         year: 'numeric',
 60 |       },
 61 |       rangeMonth: {
 62 |         month: '2-digit',
 63 |       },
 64 |       rangeDay: {
 65 |         day: '2-digit',
 66 |       },
 67 |       long: {
 68 |         day: '2-digit',
 69 |         month: '2-digit',
 70 |         year: 'numeric',
 71 |         hour: '2-digit',
 72 |         minute: '2-digit',
 73 |       },
 74 |     },
 75 |     de: {
 76 |       short: {
 77 |         day: '2-digit',
 78 |         month: '2-digit',
 79 |         year: 'numeric',
 80 |       },
 81 |       long: {
 82 |         day: '2-digit',
 83 |         month: '2-digit',
 84 |         year: 'numeric',
 85 |         hour: '2-digit',
 86 |         minute: '2-digit',
 87 |       },
 88 |       rangeYear: {
 89 |         year: 'numeric',
 90 |       },
 91 |       rangeMonth: {
 92 |         month: '2-digit',
 93 |       },
 94 |       rangeDay: {
 95 |         day: '2-digit',
 96 |       },
 97 |     },
 98 |   },
 99 | }))
100 | 


--------------------------------------------------------------------------------
/app/pages/prime/datatable.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | import { FilterMatchMode } from '@primevue/core/api'
 3 | 
 4 | const { tableData, filters, dataTableRef, exportCSV } = usePrimeDataTable()
 5 | 
 6 | filters.value = {
 7 |   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
 8 |   name: { value: null, matchMode: FilterMatchMode.CONTAINS },
 9 |   code: { value: null, matchMode: FilterMatchMode.CONTAINS },
10 |   inventoryStatus: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
11 | }
12 | 
13 | const dataStore = useDataStore()
14 | 
15 | onMounted(async () => {
16 |   await dataStore.initData()
17 |   tableData.value = dataStore.products
18 | })
19 | </script>
20 | 
21 | <template>
22 |   <div class="card">
23 |     <h2>DataTable Example</h2>
24 |     <DataTable
25 |       ref="dataTableRef"
26 |       v-model:filters="filters"
27 |       :value="tableData"
28 |       data-key="name"
29 |       :global-filter-fields="['name', 'code', 'inventoryStatus']"
30 |       striped-rows
31 |       :paginator="true"
32 |       :rows="8"
33 |       paginator-template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
34 |       :rows-per-page-options="[8, 15, 50]"
35 |       current-page-report-template="Showing {first} to {last} of {totalRecords}"
36 |     >
37 |       <template #header>
38 |         <div class="datatable-header">
39 |           <div class="flex justify-between">
40 |             <span class="text-xl">Products</span>
41 |             <IconField icon-position="left">
42 |               <InputIcon class="pi pi-search" />
43 |               <InputText v-model="filters.global.value" placeholder="Global Search" />
44 |             </IconField>
45 |           </div>
46 |         </div>
47 |       </template>
48 |       <template #empty>
49 |         No Data Found.
50 |       </template>
51 |       <Column field="name" header="Name" :sortable="true" />
52 |       <Column field="code" header="Code" :sortable="true" />
53 |       <Column field="price" header="Price" :sortable="true" />
54 |       <Column field="inventoryStatus" header="Status" :sortable="true" />
55 |       <template #footer>
56 |         <div class="flex justify-between">
57 |           <span class="text-2xl">{{ tableData ? tableData.length : 0 }} Products</span>
58 |           <Button icon="pi pi-external-link" label="Export" @click="exportCSV" />
59 |         </div>
60 |       </template>
61 |       <template #paginatorRight />
62 |     </DataTable>
63 |   </div>
64 | </template>
65 | 
66 | <style scoped></style>
67 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import Aura from '@primeuix/themes/aura'
 2 | import pkg from './package.json'
 3 | 
 4 | export const wrappedPrimeInputs: string[] = ['AutoComplete', 'CascadeSelect', 'Checkbox', 'Chip', 'ColorPicker', 'DatePicker', 'InputMask', 'InputNumber', 'InputOtp', 'InputText', 'Knob', 'Listbox', 'MultiSelect', 'Password', 'RadioButton', 'Rating', 'Select', 'SelectButton', 'Slider', 'Textarea', 'ToggleButton', 'ToggleSwitch', 'TreeSelect']
 5 | 
 6 | export default defineNuxtConfig({
 7 | 
 8 |   modules: [
 9 |     '@pinia/nuxt',
10 |     '@nuxt/content',
11 |     '@vueuse/nuxt',
12 |     '@nuxt/test-utils/module',
13 |     '@nuxt/eslint',
14 |     '@nuxt/image',
15 |     '@nuxt/fonts',
16 |     '@sfxcode/formkit-primevue-nuxt',
17 |     '@unocss/nuxt',
18 |     '@pinia/colada-nuxt',
19 |     '@compodium/nuxt',
20 |   ],
21 | 
22 |   ssr: false,
23 |   devtools: { enabled: true },
24 |   runtimeConfig: {
25 |     public: {
26 |       APP_VERSION: pkg.version,
27 |       APP_NAME: pkg.name,
28 |       // eslint-disable-next-line node/prefer-global/process
29 |       APP_MODE: process.env?.NODE_ENV,
30 |     },
31 |   },
32 | 
33 |   build: {
34 |     transpile: ['nuxt', 'primevue', '@sfxcode/formkit-primevue'],
35 |   },
36 | 
37 |   sourcemap: {
38 |     client: false,
39 |     server: false,
40 |   },
41 |   future: {
42 |     compatibilityVersion: 4,
43 |   },
44 |   experimental: {
45 |     appManifest: false,
46 |   },
47 | 
48 |   compatibilityDate: '2024-07-04',
49 | 
50 |   debug: false,
51 | 
52 |   compodium: {
53 |     /* List of glob patterns to exclude components. */
54 |     ignore: ['**/AppSidebar.vue'],
55 |   },
56 | 
57 |   eslint: {
58 |     config: {
59 |       standalone: false,
60 |       nuxt: {
61 |         sortConfigKeys: true,
62 |       },
63 |     },
64 |   },
65 |   formkitPrimevue: {
66 |     includePrimeIcons: true,
67 |     includeStyles: true,
68 |     installFormKit: true,
69 |     installI18N: true,
70 |   },
71 | 
72 |   i18n: {
73 |     langDir: 'locales',
74 |     defaultLocale: 'en',
75 |     strategy: 'no_prefix',
76 |     locales: [
77 |       { code: 'en', file: 'en.json', name: 'English' },
78 |       { code: 'de', file: 'de.json', name: 'German' },
79 |     ],
80 |   },
81 |   primevue: {
82 |     autoImport: true,
83 |     options: {
84 |       theme: {
85 |         preset: Aura,
86 |         options: {
87 |           darkModeSelector: '.dark',
88 |         },
89 |       },
90 |       ripple: true,
91 |     },
92 |     components: {
93 |       exclude: [...wrappedPrimeInputs, 'Button', 'Form', 'FormField', 'Chart', 'Editor'],
94 |     },
95 | 
96 |   },
97 | 
98 | })
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt3-primevue-starter",
 3 |   "type": "module",
 4 |   "version": "2.3.4",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "build": "nuxt build",
 8 |     "dev": "nuxt dev",
 9 |     "generate": "nuxt generate",
10 |     "preview": "nuxt preview",
11 |     "postinstall": "nuxt prepare",
12 |     "start": "node .output/server/index.mjs",
13 |     "lint": "eslint ./app",
14 |     "lint:fix": "eslint --fix ./app",
15 |     "test:ui": "vitest --ui",
16 |     "test:unit": "vitest --run --reporter verbose",
17 |     "test:ci": "vitest --run --reporter verbose",
18 |     "test:coverage": "vitest run --coverage",
19 |     "release": "npm run lint && npm run build && changelogen --patch --release && git push --follow-tags"
20 |   },
21 |   "devDependencies": {
22 |     "@antfu/eslint-config": "^6.3.0",
23 |     "@compodium/nuxt": "0.1.0-beta.12",
24 |     "@iconify-json/carbon": "^1.2.14",
25 |     "@iconify-json/mdi": "^1.2.3",
26 |     "@iconify-json/prime": "^1.2.4",
27 |     "@iconify-json/twemoji": "^1.2.4",
28 |     "@nuxt/content": "3.9.0",
29 |     "@nuxt/devtools": "^3.1.1",
30 |     "@nuxt/eslint": "^1.11.0",
31 |     "@nuxt/fonts": "^0.12.1",
32 |     "@nuxt/image": "^2.0.0",
33 |     "@nuxt/test-utils": "^3.20.1",
34 |     "@pinia/colada": "^0.18.0",
35 |     "@pinia/colada-nuxt": "^0.2.4",
36 |     "@pinia/nuxt": "^0.11.3",
37 |     "@primeuix/themes": "^2.0.2",
38 |     "@sfxcode/formkit-primevue-nuxt": "^1.5.7",
39 |     "@tiptap/extension-highlight": "^3.12.1",
40 |     "@tiptap/extension-text-align": "^3.12.1",
41 |     "@tiptap/extension-text-style": "^3.12.1",
42 |     "@tiptap/starter-kit": "^3.12.1",
43 |     "@tiptap/vue-3": "^3.12.1",
44 |     "@unocss/eslint-config": "^66.5.10",
45 |     "@unocss/nuxt": "^66.5.10",
46 |     "@vitest/ui": "^4.0.15",
47 |     "@vue/test-utils": "^2.4.6",
48 |     "@vueuse/nuxt": "^14.1.0",
49 |     "c8": "^10.1.3",
50 |     "changelogen": "^0.6.2",
51 |     "eslint": "^9.39.1",
52 |     "eslint-plugin-format": "^1.0.2",
53 |     "happy-dom": "^20.0.11",
54 |     "jsdom": "^27.2.0",
55 |     "nuxt": "^4.2.1",
56 |     "pinia": "^3.0.4",
57 |     "pinia-colada": "^0.0.1",
58 |     "sass": "^1.94.2",
59 |     "typescript": "^5.9.3",
60 |     "unstorage": "^1.17.3",
61 |     "vitest": "^4.0.15",
62 |     "vue-router": "^4.6.3",
63 |     "vue-sidebar-menu": "^5.9.0"
64 |   },
65 |   "pnpm": {
66 |     "onlyBuiltDependencies": [
67 |       "better-sqlite3"
68 |     ]
69 |   },
70 |   "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a"
71 | }
72 | 


--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
 1 | // uno.config.ts
 2 | import {
 3 |   defineConfig,
 4 |   presetAttributify,
 5 |   presetIcons,
 6 |   presetTypography,
 7 |   presetWind4,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from 'unocss'
11 | 
12 | function convert(color: string) {
13 |   return `color-mix(in srgb, ${color} 100%, transparent)`
14 | }
15 | 
16 | export default defineConfig({
17 |   shortcuts: [
18 |     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
19 |   ],
20 |   theme: {
21 |     colors: {
22 |       'primary': convert('var(--p-primary-color)'),
23 |       'primary-emphasis': convert('var(--p-primary-hover-color)'),
24 |       'primary-emphasis-alt': convert('var(--p-primary-active-color)'),
25 |       'primary-contrast': convert('var(--p-primary-contrast-color)'),
26 |       'primary-50': convert('var(--p-primary-50)'),
27 |       'primary-100': convert('var(--p-primary-100)'),
28 |       'primary-200': convert('var(--p-primary-200)'),
29 |       'primary-300': convert('var(--p-primary-300)'),
30 |       'primary-400': convert('var(--p-primary-400)'),
31 |       'primary-500': convert('var(--p-primary-500)'),
32 |       'primary-600': convert('var(--p-primary-600)'),
33 |       'primary-700': convert('var(--p-primary-700)'),
34 |       'primary-800': convert('var(--p-primary-800)'),
35 |       'primary-900': convert('var(--p-primary-900)'),
36 |       'primary-950': convert('var(--p-primary-950)'),
37 |       'surface-0': convert('var(--p-surface-0)'),
38 |       'surface-50': convert('var(--p-surface-50)'),
39 |       'surface-100': convert('var(--p-surface-100)'),
40 |       'surface-200': convert('var(--p-surface-200)'),
41 |       'surface-300': convert('var(--p-surface-300)'),
42 |       'surface-400': convert('var(--p-surface-400)'),
43 |       'surface-500': convert('var(--p-surface-500)'),
44 |       'surface-600': convert('var(--p-surface-600)'),
45 |       'surface-700': convert('var(--p-surface-700)'),
46 |       'surface-800': convert('var(--p-surface-800)'),
47 |       'surface-900': convert('var(--p-surface-900)'),
48 |       'surface-950': convert('var(--p-surface-950)'),
49 |     },
50 |     breakpoints: {
51 |       sm: '640px',
52 |       md: '768px',
53 |       lg: '1024px',
54 |       xl: '1280px',
55 |       xxl: '1536px',
56 |     },
57 | 
58 |   },
59 |   presets: [
60 |     presetWind4(),
61 |     presetAttributify(),
62 |     presetIcons(),
63 |     presetTypography(),
64 |   ],
65 |   transformers: [
66 |     transformerDirectives(),
67 |     transformerVariantGroup(),
68 |   ],
69 | })
70 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | import AdvertiseBox from '@/components/AdvertiseBox.vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="card surface-0 text-center">
 7 |     <div class="text-4xl font-bold mb-3">
 8 |       <span class="text-green-600">PrimeVue </span>
 9 |       <span class="text-blue-400"> & TypeScript</span>
10 |       <span class="text-green-400"> & Nuxt 3</span>
11 |     </div>
12 |     <h2 class="text-2xl pb-6">
13 |       Starter for Vue.js Development with Nuxt 3.
14 |     </h2>
15 |     <div class="gap-2 grid grid-cols-2 lg:grid-cols-3">
16 |       <AdvertiseBox header="PrimeVue 4.4.x" color="green-600">
17 |         Excellent <ExternalLink href="https://github.com/sfxcode/formkit-primevue" text="Component Library" /> for VUE
18 |       </AdvertiseBox>
19 |       <AdvertiseBox header="PrimeVue Theme" color="green-600">
20 |         <ExternalLink href="https://primevue.org/theming/styled" text="Styled Mode" /> with preset: Aura
21 |       </AdvertiseBox>
22 |       <AdvertiseBox header="FormKit" color="purple-500">
23 |         <ExternalLink href="https://formkit.com" text="Formkit" /> 1.6.x support by <ExternalLink href="https://formkit-primevue.netlify.app/" text="PrimeVue-FormKit" />
24 |       </AdvertiseBox>
25 |       <AdvertiseBox header="UnoCSS" color="green-600">
26 |         <ExternalLink href="https://unocss.dev/" text="UnoCSS" /> for rapid styling
27 |       </AdvertiseBox>
28 |       <AdvertiseBox header="VUE 3.5.x" color="green-600">
29 |         <ExternalLink href="https://vuejs.org/guide/introduction.html" text="Composition Api" /> with Script Setup
30 |       </AdvertiseBox>
31 |       <AdvertiseBox header="Typescript 5" color="blue-400">
32 |         Typesafe by default
33 |       </AdvertiseBox>
34 |       <AdvertiseBox header="Nuxt 4.0.x" color="green-400">
35 |         <ExternalLink href="https://nuxt.com/" text="Nuxt" /> with Pages, Layouts, ...
36 |       </AdvertiseBox>
37 |       <AdvertiseBox header="Nuxt Content 3.7.x" color="green-400">
38 |         <ExternalLink href="https://content.nuxt.com/" text="Content" />: Markdown, YML, CSV or JSON and MDC Syntax
39 |       </AdvertiseBox>
40 |       <AdvertiseBox header="Nuxt Modules" color="green-600">
41 |         includes <ExternalLink href="https://nuxt.com/modules/image" text="Nuxt Images" />, <ExternalLink href="https://nuxt.com/modules/fonts" text="Nuxt Fonts" />
42 |       </AdvertiseBox>
43 |       <AdvertiseBox header="VueUse" color="green-600">
44 |         <ExternalLink href="https://vueuse.org/" text="VueUse" /> included
45 |       </AdvertiseBox>
46 |       <AdvertiseBox header="Pinia 2.x" color="blue-400">
47 |         <ExternalLink href="https://pinia.vuejs.org/" text="Pinia (Colada)" />: Vue Store Implementation
48 |       </AdvertiseBox>
49 |       <AdvertiseBox header="TipTap 3.x" color="green-600">
50 |         <ExternalLink href="https://tiptap.dev/" text="TipTap" /> Editor
51 |       </AdvertiseBox>
52 |       <AdvertiseBox header="Vue Sidebar" color="green-600">
53 |         <ExternalLink href="https://github.com/yaminncco/vue-sidebar-menu" text="Sidebar" /> component
54 |       </AdvertiseBox>
55 |       <AdvertiseBox header="Nitro" color="green-400">
56 |         <ExternalLink href="https://nitro.unjs.io/" text="Nitro" />: Next Generation Server Toolkit
57 |       </AdvertiseBox>
58 |       <AdvertiseBox header="Vitest" color="blue-600">
59 |         Testing with Vitest
60 |       </AdvertiseBox>
61 |     </div>
62 |   </div>
63 | </template>
64 | 
65 | <style scoped></style>
66 | 


--------------------------------------------------------------------------------
/app/pages/form/toggle.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | const { addElement } = useFormKitSchema()
  3 | const { t } = useI18n()
  4 | 
  5 | const horizontal = ref(false)
  6 | const edit = ref(true)
  7 | 
  8 | const schema = reactive(
  9 |   [
 10 |     addElement('h2', ['Register ', '$email']),
 11 |     addElement('h3', 'Header Text H3'),
 12 |     {
 13 |       $formkit: 'primeInputText',
 14 |       name: 'name',
 15 |       label: 'Name',
 16 |       validation: 'required',
 17 |     },
 18 |     {
 19 |       $formkit: 'primeInputText',
 20 |       name: 'email',
 21 |       label: 'Email',
 22 |       help: 'This will be used for your account.',
 23 |       validation: 'required|email',
 24 |       iconPrefix: 'pi pi-book',
 25 |     },
 26 |     {
 27 |       $formkit: 'primeTextarea',
 28 |       name: 'text',
 29 |       label: 'Text',
 30 |       validation: '',
 31 |       rows: '6',
 32 |     },
 33 |     {
 34 |       $formkit: 'primeInputNumber',
 35 |       name: 'number',
 36 |       label: 'Balance',
 37 |       validation: 'max:10000',
 38 |       useGrouping: true,
 39 |       minFractionDigits: 2,
 40 |     },
 41 |     {
 42 |       $formkit: 'primeDatePicker',
 43 |       name: 'date',
 44 |       label: 'Date',
 45 |     },
 46 |     addElement('h3', 'Useful Links'),
 47 |     {
 48 |       $formkit: 'primeOutputLink',
 49 |       name: 'field',
 50 |       label: 'Google',
 51 |       value: 'https://www.google.de',
 52 |       iconSuffix: 'pi pi-check',
 53 |       prefix: '-> ',
 54 |     },
 55 |   ],
 56 | )
 57 | 
 58 | const outputSchema = reactive(
 59 |   [
 60 |     addElement('h2', ['Register ', '$email']),
 61 |     addElement('h3', 'Header Text H3'),
 62 |     {
 63 |       $formkit: 'primeOutputText',
 64 |       name: 'name',
 65 |       label: 'Name',
 66 |       validation: 'required',
 67 |     },
 68 |     {
 69 |       $formkit: 'primeOutputText',
 70 |       name: 'email',
 71 |       label: 'Email',
 72 |       iconPrefix: 'pi pi-book',
 73 |     },
 74 |     {
 75 |       $formkit: 'primeOutputText',
 76 |       name: 'text',
 77 |       label: 'Text',
 78 |       class: 'text-justify',
 79 |     },
 80 |     {
 81 |       $formkit: 'primeOutputNumber',
 82 |       name: 'number',
 83 |       label: 'Balance',
 84 |       format: 'currency',
 85 |     },
 86 |     {
 87 |       $formkit: 'primeOutputDate',
 88 |       name: 'date',
 89 |       label: 'Date',
 90 |     },
 91 |     addElement('h3', 'Useful Links'),
 92 |     {
 93 |       $formkit: 'primeOutputLink',
 94 |       name: 'field',
 95 |       value: 'https://www.google.de',
 96 |       label: 'Google',
 97 |       iconSuffix: 'pi pi-check',
 98 |       prefix: '-> ',
 99 |     },
100 |   ],
101 | )
102 | 
103 | const data = ref({ name: 'Tom', email: 'tom@coding-universe.com', date: new Date(), number: 2222.33, text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.' })
104 | 
105 | const { showSuccessMessage } = useMessages()
106 | async function submitHandler() {
107 |   showSuccessMessage('Form Submitted ...', 'Form submitted successfully')
108 | }
109 | </script>
110 | 
111 | <template>
112 |   <div class="card gap-10">
113 |     <div class="basis-1/2 md:basis-1/3">
114 |       <h2>Data Edit</h2>
115 |       <div class="mb-4 flex gap-2">
116 |         Edit Mode  <ToggleSwitch v-model="edit" />
117 |         Horizontal  <ToggleSwitch v-model="horizontal" />
118 |       </div>
119 |       <div class="max-w-100">
120 |         <FormKitDataEdit
121 |           v-if="edit"
122 |           :data="data"
123 |           :schema="schema"
124 |           :submit-label="t('save')"
125 |           :form-class="horizontal ? 'form-horizontal' : ''"
126 |           :debug-data="true"
127 |           @data-saved="submitHandler"
128 |         />
129 |         <FormKitDataView
130 |           v-if="!edit" :data="data" :schema="outputSchema"
131 |           :form-class="horizontal ? 'form-horizontal' : ''"
132 |           :debug-data="true"
133 |         />
134 |       </div>
135 |     </div>
136 |   </div>
137 | </template>
138 | 


--------------------------------------------------------------------------------
/app/pages/form/index.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang='ts'>
  2 | const { addElement, addList, addListGroup } = useFormKitSchema()
  3 | const { addListGroupFunctions, addGroupButtons, addInsertButton } = useFormKitRepeater()
  4 | const { t } = useI18n()
  5 | 
  6 | const options = [
  7 |   { label: 'Every page load', value: 'refresh' },
  8 |   { label: 'Ever hour', value: 'hourly' },
  9 |   { label: 'Every day', value: 'daily' },
 10 | ]
 11 | 
 12 | const data = ref()
 13 | 
 14 | onMounted(() => {
 15 |   const defaultData = { email: 'tom@mydomain.com', additionalMails: [{ email: 'peter@mydomain.com' }, { email: 'paul@mydomain.com' }], myCalendar: new Date() }
 16 |   addListGroupFunctions(defaultData, { email: 'name@mydomain.com' })
 17 |   data.value = defaultData
 18 | })
 19 | 
 20 | const schema = reactive(
 21 |   [
 22 |     addElement('h5', ['Validation with FormKit - Inputs from PrimeVue']),
 23 |     {
 24 |       $formkit: 'primeInputText',
 25 |       name: 'email',
 26 |       label: 'Email',
 27 |       help: 'This will be used for your account.',
 28 |       validation: 'required|email',
 29 |       outerClass: 'col-7',
 30 |     },
 31 |     addList('additionalMails', [
 32 |       addElement('div', ['Additional Mail'], { class: 'text-xl' }),
 33 |       addInsertButton(),
 34 |       addListGroup(
 35 |         [
 36 |           {
 37 |             $formkit: 'primeInputText',
 38 |             label: 'Additional Mail',
 39 |             name: 'email',
 40 |             outerClass: 'col-6',
 41 | 
 42 |           },
 43 |           addGroupButtons('', 'col-6'),
 44 |         ],
 45 |       ),
 46 |     ], true, 'true'),
 47 | 
 48 |     {
 49 |       $formkit: 'primeTextarea',
 50 |       name: 'myText',
 51 |       label: 'Text',
 52 |       rows: '5',
 53 |     },
 54 |     {
 55 |       $formkit: 'primeDatePicker',
 56 |       name: 'myDatePicker',
 57 |       label: 'Date Picker',
 58 |       validation: '',
 59 |       showIcon: true,
 60 | 
 61 |     },
 62 |     {
 63 |       $formkit: 'primePassword',
 64 |       name: 'password',
 65 |       label: 'Password',
 66 |       help: 'Enter your new password.',
 67 |       validation: 'required|length:5,16',
 68 |       outerClass: 'col-6',
 69 |     },
 70 |     {
 71 |       $formkit: 'primePassword',
 72 |       name: 'password_confirm',
 73 |       label: 'Confirm password',
 74 |       toggleMask: true,
 75 |       feedback: false,
 76 |       help: 'Enter your new password again to confirm it.',
 77 |       validation: 'required|confirm',
 78 |       validationLabel: 'password confirmation',
 79 |       outerClass: 'col-6',
 80 |     },
 81 |     {
 82 |       $formkit: 'primeCheckbox',
 83 |       name: 'eu_citizen',
 84 |       id: 'eu',
 85 |       suffix: 'Are you a european citizen?',
 86 |     },
 87 |     {
 88 |       $formkit: 'primeSelect',
 89 |       if: '$eu_citizen', // 👀 Oooo, conditionals!
 90 |       name: 'cookie_notice',
 91 |       label: 'Cookie notice frequency',
 92 |       value: 'hourly',
 93 |       showClear: false,
 94 |       filter: false,
 95 |       optionLabel: 'label',
 96 |       optionValue: 'value',
 97 |       options,
 98 |       help: 'How often should we display a cookie notice?',
 99 |     },
100 |     {
101 |       $formkit: 'primeSlider',
102 |       name: 'slider',
103 |       label: 'Max messages',
104 |       style: 'width: 200px;margin-top: 6px;margin-bottom: 4px',
105 |       min: 5,
106 |       step: 5,
107 |       value: 10,
108 |     },
109 |     {
110 |       $formkit: 'primeKnob',
111 |       name: 'knob',
112 |       label: 'Use Knob',
113 |       value: 50,
114 |     },
115 |   ],
116 | )
117 | 
118 | async function submitHandler() {
119 |   // Lets pretend this is an ajax request:
120 |   await new Promise(resolve => setTimeout(resolve, 1000))
121 | }
122 | </script>
123 | 
124 | <template>
125 |   <div class="card flex flex-wrap gap-10">
126 |     <div class="basis-1/3 md:basis-1/4">
127 |       <h2>Basic Demo</h2>
128 | 
129 |       <div v-if="data" class="min-w-25rem">
130 |         <FormKitDataEdit
131 |           v-model="data"
132 |           :schema="schema"
133 |           :show-reset="true"
134 |           :debug-schema="false" :debug-data="true"
135 |           :submit-label="t('save')"
136 |           @data-saved="submitHandler"
137 |         />
138 |       </div>
139 |     </div>
140 |     <div class="basis-1/2 md:basis-1/3">
141 |       <h2>Formkit-PrimeVue</h2>
142 |       <div class="text-xl mt-12">
143 |         <h3>GitHub</h3>
144 |         <a href="https://github.com/sfxcode/formkit-primevue">formkit-primevue</a>
145 |         <h3>More examples</h3>
146 |         <a href="https://formkit-primevue.netlify.app/">Formkit PrimeVue Demo</a>
147 |       </div>
148 |     </div>
149 |   </div>
150 | </template>
151 | 
152 | <style lang='scss' scoped>
153 | </style>
154 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Nuxt 4 + PrimeVue 4 Starter
  2 | 
  3 | Build your VUE.js App with Nuxt 4. First Class PrimeVUE support. Validation by Formkit.
  4 | Module by [FormKit-PrimeVue-Nuxt](https://github.com/sfxcode/formkit-primevue-nuxt).
  5 | Based on PrimeVue Styled Theme with Aura Preset.
  6 | 
  7 | [![CI](https://github.com/sfxcode/nuxt3-primevue-starter/actions/workflows/main.yml/badge.svg)](https://github.com/sfxcode/nuxt3-primevue-starter/actions/workflows/main.yml)
  8 | 
  9 | [![Netlify Status](https://api.netlify.com/api/v1/badges/436604a1-fe0c-4b76-aeae-75744104d16b/deploy-status)](https://app.netlify.com/sites/nuxt3-primevue-starter/deploys)
 10 | 
 11 | THX to [antfu / Vitesse Nuxt3](https://github.com/antfu/vitesse-nuxt3) for starter code
 12 | 
 13 | ## Features
 14 | 
 15 | - [Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
 16 | - [PrimeVue](https://primevue.org/) 4.4.x with Aura Theme
 17 | - [Formkit-PrimeVue](https://formkit-primevue.netlify.app/) PrimeVue Formkit Integration
 18 | - [Vite](https://vitejs.dev/) - Instant HMR
 19 | - [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
 20 | - Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
 21 | - [State Management via Pinia](https://pinia.esm.dev)
 22 | - [TipTap](https://tiptap.dev) - Headless Editor
 23 | - [Vitest](https://vitest.dev/) - Blazing Fast Unit Test Framework ([Getting started](https://vitest.dev/guide))
 24 | - [Compodium](https://github.com/romhml/compodium) - A plug and play component playground for Vue and Nuxt. ([Getting started](https://compodium.dev/getting-started/installation))
 25 | 
 26 | ## Nuxt Modules (included in formkit-primevue-nuxt)
 27 | 
 28 | - [FormKit-PrimeVue-Nuxt](https://github.com/sfxcode/formkit-primevue-nuxt) - FormKit PrimeVue Nuxt Module
 29 | - [PrimeVue-Nuxt](https://primevue.org/nuxt/) PrimeVue UI Framework
 30 | - [FormKit-Nuxt](https://formkit.com/) - Form Handling
 31 | - [I18n-Nuxt](https://v8.i18n.nuxtjs.org) - Integration with [Vue I18n](https://vue-i18n.intlify.dev/)
 32 | 
 33 | ## Nuxt Modules (additional)
 34 | 
 35 | - [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
 36 | - [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
 37 | - [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
 38 | - [Content](https://content.nuxtjs.org) - parses .md, .yml, .csv and .json files
 39 | - [Images](https://nuxt.com/modules/images) - Optimised images for Nuxt
 40 | - [Fonts](https://nuxt.com/modules/fonts) - Plug-and-play custom web font optimization and configuration for Nuxt apps
 41 | - [nuxt-test-utils](https://github.com/nuxt/test-utils) - Support for e2e and unit testing ([Getting started](https://nuxt.com/docs/getting-started/testing))
 42 | 
 43 | ## Module Configurations
 44 | 
 45 | ### FormKit PrimeVue Nuxt
 46 | 
 47 | Module options for FormKit PrimeVue Nuxt.
 48 | Below are the default values, if they fit your needs, you don't need to add them to your nuxt.config.ts.
 49 | 
 50 | ```typescript
 51 |   formkitPrimevue: {
 52 |   includePrimeIcons: true,
 53 |     includeStyles: true,
 54 |     installFormKit: true,
 55 |     installI18N: true,
 56 | },
 57 | ```
 58 | 
 59 | ### Nuxt PrimeVue configuration
 60 | 
 61 | ```typescript
 62 |   primevue: {
 63 |     autoImport: true,
 64 |   },
 65 |   options: {
 66 |     theme: {
 67 |       preset: Aura,
 68 |         options: {
 69 |         darkModeSelector: '.dark',
 70 |       },
 71 |     },
 72 |     ripple: true,
 73 |   },
 74 | },
 75 | ```
 76 | 
 77 | ## PrimeVue 3
 78 | 
 79 | Nuxt PrimeVue 3 under the [prime3](https://github.com/sfxcode/nuxt3-primevue-starter/tree/prime3) branch of this project
 80 | 
 81 | [Starter App on Netlify](https://vite-primevue-starter.netlify.app/)
 82 | 
 83 | ## Project setup and usage
 84 | 
 85 | Install node:
 86 | 
 87 | **Latest node LTS version required (20)**
 88 | Use node manager like **nvm** to install.
 89 | 
 90 | Install pnpm:
 91 | [https://pnpm.io/installation](https://pnpm.io/installation)
 92 | 
 93 | Install dependencies:
 94 | 
 95 | ```
 96 | pnpm install
 97 | ```
 98 | 
 99 | Run development server:
100 | 
101 | ```
102 | pnpm dev
103 | ```
104 | 
105 | Vitest test runner:
106 | 
107 | ```
108 | pnpm test:unit
109 | ```
110 | 
111 | Build:
112 | 
113 | ```
114 | pnpm build
115 | ```
116 | 
117 | Start Production build:
118 | 
119 | ```
120 | pnpm start
121 | ```
122 | 
123 | ## Tools
124 | 
125 | I use IntelliJ with VUE.js plugin.
126 | 
127 | ## Supporters
128 | 
129 | JetBrains is supporting this open source project with:
130 | 
131 | [![Intellij IDEA](https://resources.jetbrains.com/storage/products/company/brand/logos/IntelliJ_IDEA.svg?_gl=1*186j7fd*_gcl_au*MjEwMzAyNDUzNi4xNzIwMTE5MTc0*_ga*MTg4NjQzMDA5MC4xNzIwMTE5MTc0*_ga_9J976DJZ68*MTcyMDExOTE3NC4xLjAuMTcyMDExOTE3OS41NS4wLjA.)](http://www.jetbrains.com/idea/)
132 | 
133 | ![](public/starter_4.png)
134 | 


--------------------------------------------------------------------------------
/app/components/TipTap.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { Highlight } from '@tiptap/extension-highlight'
  3 | import { TextAlign } from '@tiptap/extension-text-align'
  4 | import { StarterKit } from '@tiptap/starter-kit'
  5 | import { Editor, EditorContent } from '@tiptap/vue-3'
  6 | 
  7 | const props = defineProps({
  8 |   modelValue: {
  9 |     type: String,
 10 |     required: true,
 11 |   },
 12 |   editable: {
 13 |     type: Boolean,
 14 |     default: true,
 15 |   },
 16 | })
 17 | 
 18 | const emit = defineEmits(['update:modelValue'])
 19 | 
 20 | const editor = ref()
 21 | 
 22 | watch(
 23 |   () => props.modelValue,
 24 |   (value) => {
 25 |     const isSame = editor.value.getHTML() === value
 26 |     if (!isSame)
 27 |       editor.value.commands.setContent(value, false)
 28 |   },
 29 | )
 30 | 
 31 | onMounted(() => {
 32 |   editor.value = new Editor({
 33 |     content: props.modelValue,
 34 |     editable: props.editable,
 35 |     editorProps: {
 36 |       attributes: {
 37 |         class: '',
 38 |       },
 39 |     },
 40 |     extensions: [StarterKit, Highlight, TextAlign.configure({ types: ['heading', 'paragraph'] })],
 41 |     onUpdate: () => {
 42 |       emit('update:modelValue', editor.value?.getHTML())
 43 |     },
 44 |   })
 45 | })
 46 | 
 47 | onBeforeUnmount(() => {
 48 |   editor.value?.destroy()
 49 |   editor.value = null
 50 | })
 51 | </script>
 52 | 
 53 | <template>
 54 |   <div v-if="editor">
 55 |     <Toolbar id="toolbar">
 56 |       <template #start>
 57 |         <Button
 58 |           id="bold"
 59 |           size="small"
 60 |           label="B"
 61 |           :class="{ 'p-button-outlined': !editor.isActive('bold') }"
 62 |           @click="editor.chain().focus().toggleBold().run()"
 63 |         />
 64 |         <Button
 65 |           id="italic"
 66 |           size="small"
 67 |           label="I"
 68 |           :class="{ 'p-button-outlined': !editor.isActive('italic') }"
 69 |           @click="editor.chain().focus().toggleItalic().run()"
 70 |         />
 71 |         <Button
 72 |           id="strike"
 73 |           size="small"
 74 |           label="T"
 75 |           :class="{ 'p-button-outlined': !editor.isActive('strike') }"
 76 |           @click="editor.chain().focus().toggleStrike().run()"
 77 |         />
 78 |         <Button
 79 |           size="small"
 80 |           label="Clear"
 81 |           class="p-button-outlined"
 82 |           @click="editor.chain().focus().unsetAllMarks().run()"
 83 |         />
 84 |         <span class="separator" />
 85 |         <Button
 86 |           size="small"
 87 |           label="P"
 88 |           :class="{ 'p-button-outlined': !editor.isActive('paragraph') }"
 89 |           @click="editor.chain().focus().setParagraph().run()"
 90 |         />
 91 |         <Button
 92 |           size="small"
 93 |           label="H1"
 94 |           :class="{ 'p-button-outlined': !editor.isActive('heading', { level: 1 }) }"
 95 |           @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
 96 |         />
 97 |         <Button
 98 |           size="small"
 99 |           label="H2"
100 |           :class="{ 'p-button-outlined': !editor.isActive('heading', { level: 2 }) }"
101 |           @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
102 |         />
103 |         <Button
104 |           size="small"
105 |           label="H3"
106 |           :class="{ 'p-button-outlined': !editor.isActive('heading', { level: 3 }) }"
107 |           @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
108 |         />
109 |         <Button
110 |           size="small"
111 |           label="H4"
112 |           :class="{ 'p-button-outlined': !editor.isActive('heading', { level: 4 }) }"
113 |           @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
114 |         />
115 |         <Button
116 |           size="small"
117 |           label="H5"
118 |           :class="{ 'p-button-outlined': !editor.isActive('heading', { level: 5 }) }"
119 |           @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
120 |         />
121 |         <Button
122 |           size="small"
123 |           label="H6"
124 |           :class="{ 'p-button-outlined': !editor.isActive('heading', { level: 6 }) }"
125 |           @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
126 |         />
127 |       </template>
128 |       <template #center>
129 |         <Button
130 |           size="small"
131 |           icon="pi pi-list"
132 |           icon-only
133 |           :class="{ 'p-button-outlined': !editor.isActive('bulletList') }"
134 |           @click="editor.chain().focus().toggleBulletList().run()"
135 |         />
136 |         <Button
137 |           size="small"
138 |           icon="pi pi-code"
139 |           icon-only
140 |           :class="{ 'p-button-outlined': !editor.isActive('codeBlock') }"
141 |           @click="editor.chain().focus().toggleCodeBlock().run()"
142 |         />
143 |         <Button
144 |           size="small"
145 |           icon="pi pi-minus"
146 |           icon-only
147 |           class="p-button-outlined"
148 |           @click="editor.chain().focus().setHorizontalRule().run()"
149 |         />
150 |         <Button
151 |           size="small"
152 |           icon="pi pi-bolt"
153 |           icon-only
154 |           :class="{ 'p-button-outlined': !editor.isActive('highlight') }"
155 |           @click="editor.chain().focus().toggleHighlight().run()"
156 |         />
157 |         <Button
158 |           size="small"
159 |           label="Quote"
160 |           :class="{ 'p-button-outlined': !editor.isActive('blockquote') }"
161 |           @click="editor.chain().focus().toggleBlockquote().run()"
162 |         />
163 |         <span class="separator" />
164 |         <Button
165 |           size="small"
166 |           icon="pi pi-align-left"
167 |           icon-only
168 |           :class="{ 'p-button-outlined': !editor.isActive({ textAlign: 'left' }) }"
169 |           @click="editor.chain().focus().setTextAlign('left').run()"
170 |         />
171 |         <Button
172 |           size="small"
173 |           icon="pi pi-align-center"
174 |           icon-only
175 |           :class="{ 'p-button-outlined': !editor.isActive({ textAlign: 'center' }) }"
176 |           @click="editor.chain().focus().setTextAlign('center').run()"
177 |         />
178 |         <Button
179 |           size="small"
180 |           icon="pi pi-align-right"
181 |           icon-only
182 |           :class="{ 'p-button-outlined': !editor.isActive({ textAlign: 'right' }) }"
183 |           @click="editor.chain().focus().setTextAlign('right').run()"
184 |         />
185 |         <Button
186 |           size="small"
187 |           icon="pi pi-align-justify"
188 |           icon-only
189 |           :class="{ 'p-button-outlined': !editor.isActive({ textAlign: 'justify' }) }"
190 |           @click="editor.chain().focus().setTextAlign('justify').run()"
191 |         />
192 |       </template>
193 | 
194 |       <template #end>
195 |         <Button
196 |           size="small"
197 |           severity="secondary"
198 |           label="Undo"
199 |           :disabled="!editor.can().chain().focus().undo().run()"
200 |           @click="editor.chain().focus().undo().run()"
201 |         />
202 |         <Button
203 |           size="small"
204 |           severity="secondary"
205 |           label="Redo"
206 |           :disabled="!editor.can().chain().focus().redo().run()"
207 |           @click="editor.chain().focus().redo().run()"
208 |         />
209 |       </template>
210 |     </Toolbar>
211 |     <EditorContent :editor="editor" class="p-inputtext p-tiptap" />
212 |   </div>
213 | </template>
214 | 
215 | <style scoped lang="scss">
216 | .separator {
217 |   content: '';
218 |   margin-right: 0.5rem;
219 | }
220 | 
221 | #toolbar {
222 |   padding: 0.5rem;
223 |   border-bottom: none;
224 |   button {
225 |     margin-right: 0.25rem;
226 |     font-weight: bold;
227 |   }
228 |   .p-colorpicker {
229 |     margin-right: 0.25rem;
230 |   }
231 |   .p-button.p-button-sm {
232 |     padding: 0.4375rem 0.4375rem;
233 |   }
234 | }
235 | 
236 | .p-tiptap :focus {
237 |   outline-offset: 2px;
238 |   outline: 2px solid transparent;
239 | }
240 | #bold {
241 |   font-weight: 900;
242 | }
243 | 
244 | #italic {
245 |   font-style: italic;
246 | }
247 | 
248 | #strike {
249 |   text-decoration: line-through;
250 | }
251 | </style>
252 | 


--------------------------------------------------------------------------------
/server/api/products.ts:
--------------------------------------------------------------------------------
  1 | export default defineEventHandler(() => {
  2 |   return {
  3 |     data: [
  4 |       {
  5 |         id: '1000',
  6 |         code: 'f230fh0g3',
  7 |         name: 'Bamboo Watch',
  8 |         description: 'Product Description',
  9 |         image: 'bamboo-watch.jpg',
 10 |         price: 65,
 11 |         category: 'Accessories',
 12 |         quantity: 24,
 13 |         inventoryStatus: 'INSTOCK',
 14 |         rating: 5,
 15 |       },
 16 |       {
 17 |         id: '1001',
 18 |         code: 'nvklal433',
 19 |         name: 'Black Watch',
 20 |         description: 'Product Description',
 21 |         image: 'black-watch.jpg',
 22 |         price: 72,
 23 |         category: 'Accessories',
 24 |         quantity: 61,
 25 |         inventoryStatus: 'INSTOCK',
 26 |         rating: 4,
 27 |       },
 28 |       {
 29 |         id: '1002',
 30 |         code: 'zz21cz3c1',
 31 |         name: 'Blue Band',
 32 |         description: 'Product Description',
 33 |         image: 'blue-band.jpg',
 34 |         price: 79,
 35 |         category: 'Fitness',
 36 |         quantity: 2,
 37 |         inventoryStatus: 'LOWSTOCK',
 38 |         rating: 3,
 39 |       },
 40 |       {
 41 |         id: '1003',
 42 |         code: '244wgerg2',
 43 |         name: 'Blue T-Shirt',
 44 |         description: 'Product Description',
 45 |         image: 'blue-t-shirt.jpg',
 46 |         price: 29,
 47 |         category: 'Clothing',
 48 |         quantity: 25,
 49 |         inventoryStatus: 'INSTOCK',
 50 |         rating: 5,
 51 |       },
 52 |       {
 53 |         id: '1004',
 54 |         code: 'h456wer53',
 55 |         name: 'Bracelet',
 56 |         description: 'Product Description',
 57 |         image: 'bracelet.jpg',
 58 |         price: 15,
 59 |         category: 'Accessories',
 60 |         quantity: 73,
 61 |         inventoryStatus: 'INSTOCK',
 62 |         rating: 4,
 63 |       },
 64 |       {
 65 |         id: '1005',
 66 |         code: 'av2231fwg',
 67 |         name: 'Brown Purse',
 68 |         description: 'Product Description',
 69 |         image: 'brown-purse.jpg',
 70 |         price: 120,
 71 |         category: 'Accessories',
 72 |         quantity: 0,
 73 |         inventoryStatus: 'OUTOFSTOCK',
 74 |         rating: 4,
 75 |       },
 76 |       {
 77 |         id: '1006',
 78 |         code: 'bib36pfvm',
 79 |         name: 'Chakra Bracelet',
 80 |         description: 'Product Description',
 81 |         image: 'chakra-bracelet.jpg',
 82 |         price: 32,
 83 |         category: 'Accessories',
 84 |         quantity: 5,
 85 |         inventoryStatus: 'LOWSTOCK',
 86 |         rating: 3,
 87 |       },
 88 |       {
 89 |         id: '1007',
 90 |         code: 'mbvjkgip5',
 91 |         name: 'Galaxy Earrings',
 92 |         description: 'Product Description',
 93 |         image: 'galaxy-earrings.jpg',
 94 |         price: 34,
 95 |         category: 'Accessories',
 96 |         quantity: 23,
 97 |         inventoryStatus: 'INSTOCK',
 98 |         rating: 5,
 99 |       },
100 |       {
101 |         id: '1008',
102 |         code: 'vbb124btr',
103 |         name: 'Game Controller',
104 |         description: 'Product Description',
105 |         image: 'game-controller.jpg',
106 |         price: 99,
107 |         category: 'Electronics',
108 |         quantity: 2,
109 |         inventoryStatus: 'LOWSTOCK',
110 |         rating: 4,
111 |       },
112 |       {
113 |         id: '1009',
114 |         code: 'cm230f032',
115 |         name: 'Gaming Set',
116 |         description: 'Product Description',
117 |         image: 'gaming-set.jpg',
118 |         price: 299,
119 |         category: 'Electronics',
120 |         quantity: 63,
121 |         inventoryStatus: 'INSTOCK',
122 |         rating: 3,
123 |       },
124 |       {
125 |         id: '1010',
126 |         code: 'plb34234v',
127 |         name: 'Gold Phone Case',
128 |         description: 'Product Description',
129 |         image: 'gold-phone-case.jpg',
130 |         price: 24,
131 |         category: 'Accessories',
132 |         quantity: 0,
133 |         inventoryStatus: 'OUTOFSTOCK',
134 |         rating: 4,
135 |       },
136 |       {
137 |         id: '1011',
138 |         code: '4920nnc2d',
139 |         name: 'Green Earbuds',
140 |         description: 'Product Description',
141 |         image: 'green-earbuds.jpg',
142 |         price: 89,
143 |         category: 'Electronics',
144 |         quantity: 23,
145 |         inventoryStatus: 'INSTOCK',
146 |         rating: 4,
147 |       },
148 |       {
149 |         id: '1012',
150 |         code: '250vm23cc',
151 |         name: 'Green T-Shirt',
152 |         description: 'Product Description',
153 |         image: 'green-t-shirt.jpg',
154 |         price: 49,
155 |         category: 'Clothing',
156 |         quantity: 74,
157 |         inventoryStatus: 'INSTOCK',
158 |         rating: 5,
159 |       },
160 |       {
161 |         id: '1013',
162 |         code: 'fldsmn31b',
163 |         name: 'Grey T-Shirt',
164 |         description: 'Product Description',
165 |         image: 'grey-t-shirt.jpg',
166 |         price: 48,
167 |         category: 'Clothing',
168 |         quantity: 0,
169 |         inventoryStatus: 'OUTOFSTOCK',
170 |         rating: 3,
171 |       },
172 |       {
173 |         id: '1014',
174 |         code: 'waas1x2as',
175 |         name: 'Headphones',
176 |         description: 'Product Description',
177 |         image: 'headphones.jpg',
178 |         price: 175,
179 |         category: 'Electronics',
180 |         quantity: 8,
181 |         inventoryStatus: 'LOWSTOCK',
182 |         rating: 5,
183 |       },
184 |       {
185 |         id: '1015',
186 |         code: 'vb34btbg5',
187 |         name: 'Light Green T-Shirt',
188 |         description: 'Product Description',
189 |         image: 'light-green-t-shirt.jpg',
190 |         price: 49,
191 |         category: 'Clothing',
192 |         quantity: 34,
193 |         inventoryStatus: 'INSTOCK',
194 |         rating: 4,
195 |       },
196 |       {
197 |         id: '1016',
198 |         code: 'k8l6j58jl',
199 |         name: 'Lime Band',
200 |         description: 'Product Description',
201 |         image: 'lime-band.jpg',
202 |         price: 79,
203 |         category: 'Fitness',
204 |         quantity: 12,
205 |         inventoryStatus: 'INSTOCK',
206 |         rating: 3,
207 |       },
208 |       {
209 |         id: '1017',
210 |         code: 'v435nn85n',
211 |         name: 'Mini Speakers',
212 |         description: 'Product Description',
213 |         image: 'mini-speakers.jpg',
214 |         price: 85,
215 |         category: 'Clothing',
216 |         quantity: 42,
217 |         inventoryStatus: 'INSTOCK',
218 |         rating: 4,
219 |       },
220 |       {
221 |         id: '1018',
222 |         code: '09zx9c0zc',
223 |         name: 'Painted Phone Case',
224 |         description: 'Product Description',
225 |         image: 'painted-phone-case.jpg',
226 |         price: 56,
227 |         category: 'Accessories',
228 |         quantity: 41,
229 |         inventoryStatus: 'INSTOCK',
230 |         rating: 5,
231 |       },
232 |       {
233 |         id: '1019',
234 |         code: 'mnb5mb2m5',
235 |         name: 'Pink Band',
236 |         description: 'Product Description',
237 |         image: 'pink-band.jpg',
238 |         price: 79,
239 |         category: 'Fitness',
240 |         quantity: 63,
241 |         inventoryStatus: 'INSTOCK',
242 |         rating: 4,
243 |       },
244 |       {
245 |         id: '1020',
246 |         code: 'r23fwf2w3',
247 |         name: 'Pink Purse',
248 |         description: 'Product Description',
249 |         image: 'pink-purse.jpg',
250 |         price: 110,
251 |         category: 'Accessories',
252 |         quantity: 0,
253 |         inventoryStatus: 'OUTOFSTOCK',
254 |         rating: 4,
255 |       },
256 |       {
257 |         id: '1021',
258 |         code: 'pxpzczo23',
259 |         name: 'Purple Band',
260 |         description: 'Product Description',
261 |         image: 'purple-band.jpg',
262 |         price: 79,
263 |         category: 'Fitness',
264 |         quantity: 6,
265 |         inventoryStatus: 'LOWSTOCK',
266 |         rating: 3,
267 |       },
268 |       {
269 |         id: '1022',
270 |         code: '2c42cb5cb',
271 |         name: 'Purple Gemstone Necklace',
272 |         description: 'Product Description',
273 |         image: 'purple-gemstone-necklace.jpg',
274 |         price: 45,
275 |         category: 'Accessories',
276 |         quantity: 62,
277 |         inventoryStatus: 'INSTOCK',
278 |         rating: 4,
279 |       },
280 |       {
281 |         id: '1023',
282 |         code: '5k43kkk23',
283 |         name: 'Purple T-Shirt',
284 |         description: 'Product Description',
285 |         image: 'purple-t-shirt.jpg',
286 |         price: 49,
287 |         category: 'Clothing',
288 |         quantity: 2,
289 |         inventoryStatus: 'LOWSTOCK',
290 |         rating: 5,
291 |       },
292 |       {
293 |         id: '1024',
294 |         code: 'lm2tny2k4',
295 |         name: 'Shoes',
296 |         description: 'Product Description',
297 |         image: 'shoes.jpg',
298 |         price: 64,
299 |         category: 'Clothing',
300 |         quantity: 0,
301 |         inventoryStatus: 'INSTOCK',
302 |         rating: 4,
303 |       },
304 |       {
305 |         id: '1025',
306 |         code: 'nbm5mv45n',
307 |         name: 'Sneakers',
308 |         description: 'Product Description',
309 |         image: 'sneakers.jpg',
310 |         price: 78,
311 |         category: 'Clothing',
312 |         quantity: 52,
313 |         inventoryStatus: 'INSTOCK',
314 |         rating: 4,
315 |       },
316 |       {
317 |         id: '1026',
318 |         code: 'zx23zc42c',
319 |         name: 'Teal T-Shirt',
320 |         description: 'Product Description',
321 |         image: 'teal-t-shirt.jpg',
322 |         price: 49,
323 |         category: 'Clothing',
324 |         quantity: 3,
325 |         inventoryStatus: 'LOWSTOCK',
326 |         rating: 3,
327 |       },
328 |       {
329 |         id: '1027',
330 |         code: 'acvx872gc',
331 |         name: 'Yellow Earbuds',
332 |         description: 'Product Description',
333 |         image: 'yellow-earbuds.jpg',
334 |         price: 89,
335 |         category: 'Electronics',
336 |         quantity: 35,
337 |         inventoryStatus: 'INSTOCK',
338 |         rating: 3,
339 |       },
340 |       {
341 |         id: '1028',
342 |         code: 'tx125ck42',
343 |         name: 'Yoga Mat',
344 |         description: 'Product Description',
345 |         image: 'yoga-mat.jpg',
346 |         price: 20,
347 |         category: 'Fitness',
348 |         quantity: 15,
349 |         inventoryStatus: 'INSTOCK',
350 |         rating: 5,
351 |       },
352 |       {
353 |         id: '1029',
354 |         code: 'gwuby345v',
355 |         name: 'Yoga Set',
356 |         description: 'Product Description',
357 |         image: 'yoga-set.jpg',
358 |         price: 20,
359 |         category: 'Fitness',
360 |         quantity: 25,
361 |         inventoryStatus: 'INSTOCK',
362 |         rating: 8,
363 |       },
364 |     ],
365 |   }
366 | })
367 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | 
  4 | ## v2.3.4
  5 | 
  6 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.3.3...v2.3.4)
  7 | 
  8 | ### 🩹 Fixes
  9 | 
 10 | - Change strictPeerDependencies to false in pnpm-workspace.yaml ([9cae3e2](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9cae3e2))
 11 | - Disable server-side rendering in nuxt.config.ts ([8d1c697](https://github.com/sfxcode/nuxt3-primevue-starter/commit/8d1c697))
 12 | 
 13 | ### 🏡 Chore
 14 | 
 15 | - Update dependencies in package.json ([dd0b98c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/dd0b98c))
 16 | - Update package manager version to pnpm@10.24.0 ([4a3cfff](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4a3cfff))
 17 | 
 18 | ### ❤️ Contributors
 19 | 
 20 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
 21 | 
 22 | ## v2.3.3
 23 | 
 24 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.3.2...v2.3.3)
 25 | 
 26 | ### 🚀 Enhancements
 27 | 
 28 | - Add ToDoExampleHelp and preview components ([6eace18](https://github.com/sfxcode/nuxt3-primevue-starter/commit/6eace18))
 29 | - Enhance components with default slot content and update props ([92706a3](https://github.com/sfxcode/nuxt3-primevue-starter/commit/92706a3))
 30 | - Update preview component styles and improve package scripts ([b6fc2c2](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b6fc2c2))
 31 | - Update preview component styles and improve package scripts ([d03e255](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d03e255))
 32 | 
 33 | ### 📖 Documentation
 34 | 
 35 | - Update README to reflect Nuxt 4 and PrimeVue 4.4.x support ([9972573](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9972573))
 36 | - Update README to reflect Nuxt 4 support ([3b66809](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3b66809))
 37 | 
 38 | ### 🏡 Chore
 39 | 
 40 | - **dependencies:** Update dependencies to latest versions ([ef2ee0d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/ef2ee0d))
 41 | - **dependencies:** Update packageManager to pnpm@10.18.3 ([f59247c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/f59247c))
 42 | - **dependencies:** Add @compodium/nuxt and update configuration ([3b6fcdf](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3b6fcdf))
 43 | 
 44 | ### ✅ Tests
 45 | 
 46 | - Update ExternalLink tests to reflect PrimeVue integration ([62be6b4](https://github.com/sfxcode/nuxt3-primevue-starter/commit/62be6b4))
 47 | 
 48 | ### 🎨 Styles
 49 | 
 50 | - Reorder class attributes for consistency in 404.vue and BaseButton.vue ([e70cd85](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e70cd85))
 51 | 
 52 | ### ❤️ Contributors
 53 | 
 54 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
 55 | 
 56 | ## v2.3.2
 57 | 
 58 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.3.1...v2.3.2)
 59 | 
 60 | ### 🏡 Chore
 61 | 
 62 | - **dependencies:** Update dependencies to latest versions ([44f4f67](https://github.com/sfxcode/nuxt3-primevue-starter/commit/44f4f67))
 63 | - Update PrimeVue and Nuxt Content versions in index.vue ([4953aea](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4953aea))
 64 | - **dependencies:** Update packageManager version to pnpm@10.18.2 ([0b12871](https://github.com/sfxcode/nuxt3-primevue-starter/commit/0b12871))
 65 | 
 66 | ### ❤️ Contributors
 67 | 
 68 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
 69 | 
 70 | ## v2.3.1
 71 | 
 72 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.3.0...v2.3.1)
 73 | 
 74 | ### 🏡 Chore
 75 | 
 76 | - **release:** Update release script to use patch versioning ([7b54251](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7b54251))
 77 | 
 78 | ### ✅ Tests
 79 | 
 80 | - Add unit tests for BaseButton and ExternalLink components ([e866d0d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e866d0d))
 81 | 
 82 | ### ❤️ Contributors
 83 | 
 84 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
 85 | 
 86 | ## v2.3.0
 87 | 
 88 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.15...v2.3.0)
 89 | 
 90 | ### 🏡 Chore
 91 | 
 92 | - **dependencies:** Update to Nuxt 4.0.2 and all other packages to latest versions ([4f5487f](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4f5487f))
 93 | - **docs:** Update Nuxt version in index.vue to 4.0.x ([4ddc7b3](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4ddc7b3))
 94 | - **release:** Update release script to use minor versioning ([7c09413](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7c09413))
 95 | 
 96 | ### ❤️ Contributors
 97 | 
 98 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
 99 | 
100 | ## v2.2.15
101 | 
102 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.14...v2.2.15)
103 | 
104 | ### 🏡 Chore
105 | 
106 | - **dependencies:** Update all dependencies ([4d3dd88](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4d3dd88))
107 | - **dependencies:** Update all dependencies - latest sfxcode formkit included ([3fa5f4b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3fa5f4b))
108 | - **linting:** Fix errors ([0021947](https://github.com/sfxcode/nuxt3-primevue-starter/commit/0021947))
109 | - **dependencies:** Update all dependencies ([312eb92](https://github.com/sfxcode/nuxt3-primevue-starter/commit/312eb92))
110 | - **dependencies:** Update devDependencies to latest versions ([2d9c2f9](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2d9c2f9))
111 | - **docs:** Update Nuxt Content and TipTap versions in index.vue ([3c7cd49](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3c7cd49))
112 | - **config:** Rename vue-i18n.options.ts to i18n.config.ts and update wrappedPrimeInputs ([bc2d902](https://github.com/sfxcode/nuxt3-primevue-starter/commit/bc2d902))
113 | 
114 | ### ❤️ Contributors
115 | 
116 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
117 | 
118 | ## v2.2.14
119 | 
120 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.13...v2.2.14)
121 | 
122 | ### 🩹 Fixes
123 | 
124 | - **actions:** Better-sqlite3 ([36b441e](https://github.com/sfxcode/nuxt3-primevue-starter/commit/36b441e))
125 | - **store:** New defineStore syntax ([89a883d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/89a883d))
126 | 
127 | ### 🏡 Chore
128 | 
129 | - **dependencies:** Update to primevue 4.3.4 ([44e92de](https://github.com/sfxcode/nuxt3-primevue-starter/commit/44e92de))
130 | - **dependencies:** Update all dependencies ([1724627](https://github.com/sfxcode/nuxt3-primevue-starter/commit/1724627))
131 | 
132 | ### ❤️ Contributors
133 | 
134 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
135 | 
136 | ## v2.2.13
137 | 
138 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.12...v2.2.13)
139 | 
140 | ### 🏡 Chore
141 | 
142 | - **dependencies:** Update all dependencies ([a067b32](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a067b32))
143 | 
144 | ### ❤️ Contributors
145 | 
146 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
147 | 
148 | ## v2.2.12
149 | 
150 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.11...v2.2.12)
151 | 
152 | ### 🚀 Enhancements
153 | 
154 | - **pinia:** Add pinia-colada sample ([f84582f](https://github.com/sfxcode/nuxt3-primevue-starter/commit/f84582f))
155 | - **pinia:** Add pinia-colada sample ([f8ddf97](https://github.com/sfxcode/nuxt3-primevue-starter/commit/f8ddf97))
156 | 
157 | ### ❤️ Contributors
158 | 
159 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
160 | 
161 | ## v2.2.11
162 | 
163 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.10...v2.2.11)
164 | 
165 | ### 💅 Refactors
166 | 
167 | - **form:** Use v-model for data and enable reset button ([0bbb34b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/0bbb34b))
168 | 
169 | ### 🏡 Chore
170 | 
171 | - **linting:** Add eslint plugin format ([30b6ac5](https://github.com/sfxcode/nuxt3-primevue-starter/commit/30b6ac5))
172 | - **dependencies:** Update all dependencies - formkit-primevue-nuxt 1.3.0 ([83bf073](https://github.com/sfxcode/nuxt3-primevue-starter/commit/83bf073))
173 | 
174 | ### ❤️ Contributors
175 | 
176 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
177 | 
178 | ## v2.2.10
179 | 
180 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.9...v2.2.10)
181 | 
182 | ### 🚀 Enhancements
183 | 
184 | - **unocss:** Ues wind4 preset ([2cbb323](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2cbb323))
185 | 
186 | ### 🏡 Chore
187 | 
188 | - **linting:** Add nuxt linting rules ([89bcb34](https://github.com/sfxcode/nuxt3-primevue-starter/commit/89bcb34))
189 | - **build:** Fix warnings ([652551b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/652551b))
190 | 
191 | ### 🎨 Styles
192 | 
193 | - **home:** Fix shadow ([6620d7a](https://github.com/sfxcode/nuxt3-primevue-starter/commit/6620d7a))
194 | 
195 | ### ❤️ Contributors
196 | 
197 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
198 | 
199 | ## v2.2.9
200 | 
201 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.8...v2.2.9)
202 | 
203 | ### 🩹 Fixes
204 | 
205 | - **typo:** Update README.md ([4a86ba4](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4a86ba4))
206 | - **linting:** Fix warnings ([7413309](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7413309))
207 | 
208 | ### 🏡 Chore
209 | 
210 | - **dependencies:** Update all dependencies ([7ba382d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7ba382d))
211 | - **dependencies:** Update all dependencies - Nuxt 3.16.0 ([ff4b942](https://github.com/sfxcode/nuxt3-primevue-starter/commit/ff4b942))
212 | 
213 | ### ❤️ Contributors
214 | 
215 | - Sfxcode ([@sfxcode](https://github.com/sfxcode))
216 | 
217 | ## v2.2.8
218 | 
219 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.7...v2.2.8)
220 | 
221 | ### 🏡 Chore
222 | 
223 | - **dependencies:** Update to primevue 4.3.0 (within latest formkit-primevue-nuxt) and use @primeuix/themes instead of @primevue/themes ([d36f360](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d36f360))
224 | 
225 | ### ❤️ Contributors
226 | 
227 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
228 | 
229 | ## v2.2.7
230 | 
231 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.6...v2.2.7)
232 | 
233 | ### 🏡 Chore
234 | 
235 | - **dependencies:** Update all dependencies ([2fcc000](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2fcc000))
236 | 
237 | ### ❤️ Contributors
238 | 
239 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
240 | 
241 | ## v2.2.6
242 | 
243 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.5...v2.2.6)
244 | 
245 | ### 🚀 Enhancements
246 | 
247 | - **content:** Move toNuxt Content 3.1 ([b9022fc](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b9022fc))
248 | - **content:** Move toNuxt Content 3.1 ([3f808d0](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3f808d0))
249 | 
250 | ### 💅 Refactors
251 | 
252 | - **gitignore:** Add more items ([89d3786](https://github.com/sfxcode/nuxt3-primevue-starter/commit/89d3786))
253 | 
254 | ### 📖 Documentation
255 | 
256 | - Use actual Nuxt Version ([516119d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/516119d))
257 | 
258 | ### 🏡 Chore
259 | 
260 | - **dependencies:** Update all dependencies - Nuxt 3.15.4 ([a658d48](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a658d48))
261 | 
262 | ### 🎨 Styles
263 | 
264 | - **Sidebar:** Change width ([9f77310](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9f77310))
265 | 
266 | ### ❤️ Contributors
267 | 
268 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
269 | 
270 | ## v2.2.5
271 | 
272 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.4...v2.2.5)
273 | 
274 | ## v2.2.4
275 | 
276 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.3...v2.2.4)
277 | 
278 | ### 💅 Refactors
279 | 
280 | - **sidebar:** Set collapsed width to 60 px ([bd338d2](https://github.com/sfxcode/nuxt3-primevue-starter/commit/bd338d2))
281 | 
282 | ### ❤️ Contributors
283 | 
284 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
285 | 
286 | ## v2.2.3
287 | 
288 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.2...v2.2.3)
289 | 
290 | ## v2.2.2
291 | 
292 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.1...v2.2.2)
293 | 
294 | ### 🏡 Chore
295 | 
296 | - **update:** Nuxt 3.15 ([b84abdb](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b84abdb))
297 | 
298 | ### ❤️ Contributors
299 | 
300 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
301 | 
302 | ## v2.2.1
303 | 
304 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.2.0...v2.2.1)
305 | 
306 | ### 🏡 Chore
307 | 
308 | - **release:** Reset to patch releases ([4161712](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4161712))
309 | - **dependencies:** Update nuxt i18n to v9 #44 ([#44](https://github.com/sfxcode/nuxt3-primevue-starter/issues/44))
310 | 
311 | ### ❤️ Contributors
312 | 
313 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
314 | 
315 | ## v2.2.0
316 | 
317 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.10...v2.2.0)
318 | 
319 | ### 🏡 Chore
320 | 
321 | - **package:** Update to formkit-primevue-nuxt module 1.2.6 ([8c6483e](https://github.com/sfxcode/nuxt3-primevue-starter/commit/8c6483e))
322 | 
323 | ### ❤️ Contributors
324 | 
325 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
326 | 
327 | ## v2.1.10
328 | 
329 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.9...v2.1.10)
330 | 
331 | ### 🏡 Chore
332 | 
333 | - **dependencies:** PrimeVue 4.2.5 ([b8a291c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b8a291c))
334 | 
335 | ### ❤️ Contributors
336 | 
337 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
338 | 
339 | ## v2.1.9
340 | 
341 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.8...v2.1.9)
342 | 
343 | ## v2.1.8
344 | 
345 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.7...v2.1.8)
346 | 
347 | ### 🏡 Chore
348 | 
349 | - **package:** Update to formkit-primevue-nuxt module 1.2.2, add needed formkit.config.ts and modify nuxt.config.ts to changed properties for formkitPrimevue ([59bae95](https://github.com/sfxcode/nuxt3-primevue-starter/commit/59bae95))
350 | 
351 | ### ❤️ Contributors
352 | 
353 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
354 | 
355 | ## v2.1.7
356 | 
357 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.5...v2.1.7)
358 | 
359 | ### 🏡 Chore
360 | 
361 | - **package:** New version ([9bfc85b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9bfc85b))
362 | 
363 | ### ❤️ Contributors
364 | 
365 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
366 | 
367 | ## v2.1.5
368 | 
369 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.4...v2.1.5)
370 | 
371 | ## v2.1.4
372 | 
373 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.2...v2.1.4)
374 | 
375 | ## v2.1.2
376 | 
377 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.1.0...v2.1.2)
378 | 
379 | ### 💅 Refactors
380 | 
381 | - **pages:** Formkit-primevue components / composables are auto imported ([96b6f33](https://github.com/sfxcode/nuxt3-primevue-starter/commit/96b6f33))
382 | 
383 | ### 📖 Documentation
384 | 
385 | - **README:** Fix links ([5ba0b28](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5ba0b28))
386 | 
387 | ### 🏡 Chore
388 | 
389 | - **package:** Revert to patch build ([a90cbbe](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a90cbbe))
390 | - **update:** Nuxt 3.14 ([4a27daa](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4a27daa))
391 | 
392 | ### ❤️ Contributors
393 | 
394 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
395 | 
396 | ## v2.1.0
397 | 
398 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.0.9...v2.1.0)
399 | 
400 | ### 🏡 Chore
401 | 
402 | - **dependencies:** PrimeVue 4.2.1 - downgrade nitropack to 2.9.7 because of problems with version 2.10.0 and primevue ([cfd63fb](https://github.com/sfxcode/nuxt3-primevue-starter/commit/cfd63fb))
403 | - **dependencies:** Update to formkit-primevue-nuxt module ([f700455](https://github.com/sfxcode/nuxt3-primevue-starter/commit/f700455))
404 | 
405 | ### ❤️ Contributors
406 | 
407 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
408 | 
409 | ## v2.0.9
410 | 
411 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.0.8...v2.0.9)
412 | 
413 | ### 🏡 Chore
414 | 
415 | - **dependencies:** PrimeVue 4.2 ([4d4f220](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4d4f220))
416 | 
417 | ### ❤️ Contributors
418 | 
419 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
420 | 
421 | ## v2.0.8
422 | 
423 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.0.7...v2.0.8)
424 | 
425 | ### 🏡 Chore
426 | 
427 | - **dependencies:** Fix formkit css problem ([7903302](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7903302))
428 | - **dependencies:** PrimeVue 4.1 ([51d087f](https://github.com/sfxcode/nuxt3-primevue-starter/commit/51d087f))
429 | - **release:** Prepare new version ([86a6672](https://github.com/sfxcode/nuxt3-primevue-starter/commit/86a6672))
430 | - **release:** Prepare new version ([fb625fd](https://github.com/sfxcode/nuxt3-primevue-starter/commit/fb625fd))
431 | 
432 | ### ❤️ Contributors
433 | 
434 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
435 | 
436 | ## v2.0.7
437 | 
438 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.0.6...v2.0.7)
439 | 
440 | ### 🏡 Chore
441 | 
442 | - **dependencies:** Update to fix build problem ([7d03c59](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7d03c59))
443 | 
444 | ### ❤️ Contributors
445 | 
446 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
447 | 
448 | ## v2.0.6
449 | 
450 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.0.5...v2.0.6)
451 | 
452 | ## v2.0.5
453 | 
454 | [compare changes](https://github.com/sfxcode/nuxt3-primevue-starter/compare/v2.0.4...v2.0.5)
455 | 
456 | ### 🏡 Chore
457 | 
458 | - **changelog:** Add changlog command ([b72e73e](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b72e73e))
459 | 
460 | ### ❤️ Contributors
461 | 
462 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
463 | 
464 | ## v2.0.4
465 | 
466 | 
467 | ### 🚀 Enhancements
468 | 
469 | - **Data Fetching:** Use NUXT Data Fetching ([1e0e70d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/1e0e70d))
470 | - **Validation:** FormKit / formkit-primevue ([7b9bb1b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7b9bb1b))
471 | - **Validation:** FormKit / formkit-primevue ([d6806f5](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d6806f5))
472 | - **Content:** Nuxt Content 2.0 ([746a436](https://github.com/sfxcode/nuxt3-primevue-starter/commit/746a436))
473 | - **Content:** Nuxt Content 2.0 ([b115b28](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b115b28))
474 | - **Content:** Nuxt Content 2.0 ([06a516e](https://github.com/sfxcode/nuxt3-primevue-starter/commit/06a516e))
475 | - **Nuxt:** Basic Middleware Example ([a197161](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a197161))
476 | - **Nuxt:** UseFetch in datatable ([98aa548](https://github.com/sfxcode/nuxt3-primevue-starter/commit/98aa548))
477 | - **Nuxt:** UseFetch in datatable ([155115a](https://github.com/sfxcode/nuxt3-primevue-starter/commit/155115a))
478 | - **Content:** Nuxt Content Linking ([9176904](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9176904))
479 | - **Content:** Nuxt Content Linking ([9786569](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9786569))
480 | - **Content:** Nuxt Content Linking ([4661f76](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4661f76))
481 | - **Content:** Nuxt Content Linking ([052fda5](https://github.com/sfxcode/nuxt3-primevue-starter/commit/052fda5))
482 | - **Content:** Nuxt Content Linking ([30abe9f](https://github.com/sfxcode/nuxt3-primevue-starter/commit/30abe9f))
483 | - **Histoire:** First Integration ([ca57dea](https://github.com/sfxcode/nuxt3-primevue-starter/commit/ca57dea))
484 | - **Content:** Added Hero Component ([1b77688](https://github.com/sfxcode/nuxt3-primevue-starter/commit/1b77688))
485 | - **content:** Frontmatter ([ddd3039](https://github.com/sfxcode/nuxt3-primevue-starter/commit/ddd3039))
486 | - **content:** Frontmatter ([5643da1](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5643da1))
487 | - **Histoire:** Add PrimeVue CSS in setup ([48e4205](https://github.com/sfxcode/nuxt3-primevue-starter/commit/48e4205))
488 | - **tools:** Add nuxt devtools ([9bd68a2](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9bd68a2))
489 | - **tools:** Add nuxt devtools ([136458d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/136458d))
490 | - **stores:** Add SetupStore sample ([f1dbca7](https://github.com/sfxcode/nuxt3-primevue-starter/commit/f1dbca7))
491 | - **stores:** Add SetupStore sample ([d3fbaee](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d3fbaee))
492 | - **editor:** Add TipTag Example as alternative Editor ([15c7e48](https://github.com/sfxcode/nuxt3-primevue-starter/commit/15c7e48))
493 | - **editor:** Add TipTag Example as alternative Editor ([a8337c1](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a8337c1))
494 | - **editor:** Add TipTag Example as alternative Editor ([294797f](https://github.com/sfxcode/nuxt3-primevue-starter/commit/294797f))
495 | - **I18n:** Add Nuxt 3 I18n (Beta) ([94928ee](https://github.com/sfxcode/nuxt3-primevue-starter/commit/94928ee))
496 | - **sakai:** Align with latest Sakai Nuxt ([98c6e80](https://github.com/sfxcode/nuxt3-primevue-starter/commit/98c6e80))
497 | - **sakai:** Align with latest Sakai Nuxt ([ee96b87](https://github.com/sfxcode/nuxt3-primevue-starter/commit/ee96b87))
498 | - **sakai:** Align with latest Sakai Nuxt ([8df9a7d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/8df9a7d))
499 | - **primevue-nuxt:** Use official primevue nuxt module ([d61b874](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d61b874))
500 | - **validation:** Add repeater demo ([38e8430](https://github.com/sfxcode/nuxt3-primevue-starter/commit/38e8430))
501 | - **devtools:** Enable ([0e5d3e5](https://github.com/sfxcode/nuxt3-primevue-starter/commit/0e5d3e5))
502 | - **formkit:** Add asterisk plugin ([cd0a128](https://github.com/sfxcode/nuxt3-primevue-starter/commit/cd0a128))
503 | - **messages:** Use composables for messages and confirmations ([a0a1bd1](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a0a1bd1))
504 | - **unocss:** Use primevue theme colors ([1010706](https://github.com/sfxcode/nuxt3-primevue-starter/commit/1010706))
505 | 
506 | ### 🩹 Fixes
507 | 
508 | - **Histoire:** Add Plugin Vue ([a2caef1](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a2caef1))
509 | - **Histoire:** Add Plugin Vue ([114c1f5](https://github.com/sfxcode/nuxt3-primevue-starter/commit/114c1f5))
510 | - **Toast:** Toast not working in DEV mode ([fd7c0fe](https://github.com/sfxcode/nuxt3-primevue-starter/commit/fd7c0fe))
511 | - **Histoire:** Reset to 0.14.2 ([2532a22](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2532a22))
512 | - **page:** UnoCss ([632900c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/632900c))
513 | - **build:** Rollback to i18n 8 Beta 11 ([eb0feff](https://github.com/sfxcode/nuxt3-primevue-starter/commit/eb0feff))
514 | - **build:** Rollback to i18n 8 Beta 11 ([e6b18fa](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e6b18fa))
515 | - **build:** Rollback to i18n 8 Beta 11 ([e1dbe47](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e1dbe47))
516 | - **build:** Try to solve netlify unstorage problem ([73442d3](https://github.com/sfxcode/nuxt3-primevue-starter/commit/73442d3))
517 | - **UnoCSS:** Show Link in UnoCSS Sample in Dev Mode ([fab5417](https://github.com/sfxcode/nuxt3-primevue-starter/commit/fab5417))
518 | - **HeroCard:** Components should use multiple words ([8cdb43f](https://github.com/sfxcode/nuxt3-primevue-starter/commit/8cdb43f))
519 | - **validation:** Add optionLabel and optionValue ([8bb7b13](https://github.com/sfxcode/nuxt3-primevue-starter/commit/8bb7b13))
520 | - Associate the labels with the radio buttons ([345b89a](https://github.com/sfxcode/nuxt3-primevue-starter/commit/345b89a))
521 | - Hydration error ([240a252](https://github.com/sfxcode/nuxt3-primevue-starter/commit/240a252))
522 | 
523 | ### 💅 Refactors
524 | 
525 | - **Themes:** Move to unpckg ([d51faeb](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d51faeb))
526 | - **tables:** Load on mount ([7a7a8eb](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7a7a8eb))
527 | - **Pages:** Use Demo Pages from nuxt-primevue ([7240da0](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7240da0))
528 | - **Composables:** UsePrimeDataTable from nuxt-primevue ([672a48b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/672a48b))
529 | - **Composables:** UsePrimeDataTable from nuxt-primevue ([182e29d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/182e29d))
530 | - **Composables:** UsePrimeDataTable from nuxt-primevue ([573cc10](https://github.com/sfxcode/nuxt3-primevue-starter/commit/573cc10))
531 | - **nuxt-primevue:** Use 0.6.3 ([a0df43d](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a0df43d))
532 | - **nuxt-primevue:** Use 0.6.4 ([e240a9b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e240a9b))
533 | - **nuxt-primevue:** Use 0.6.9 ([574bbdf](https://github.com/sfxcode/nuxt3-primevue-starter/commit/574bbdf))
534 | - **nuxt-primevue:** Use 0.7.0 ([ea0665a](https://github.com/sfxcode/nuxt3-primevue-starter/commit/ea0665a))
535 | - **nuxt-primevue:** Use 0.7.0 ([cead5e3](https://github.com/sfxcode/nuxt3-primevue-starter/commit/cead5e3))
536 | - **nuxt-primevue:** Use 0.8.0 ([cfa2b9b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/cfa2b9b))
537 | - **nuxt-primevue:** Use 0.8.2 ([f740e6f](https://github.com/sfxcode/nuxt3-primevue-starter/commit/f740e6f))
538 | - **server:** Use Server API for Products ([250a2b1](https://github.com/sfxcode/nuxt3-primevue-starter/commit/250a2b1))
539 | - **server:** Use Server API for Products ([eedfeff](https://github.com/sfxcode/nuxt3-primevue-starter/commit/eedfeff))
540 | - **nuxt-primevue:** Use 0.8.4 ([7113bf9](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7113bf9))
541 | - **nuxt-primevue:** Use 0.9.1 ([7ce754a](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7ce754a))
542 | - **sass:** Move to assets dir ([5beb559](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5beb559))
543 | - **histoire:** Remove Histoire because of problems with nuxt content ([3ab3b03](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3ab3b03))
544 | - **themes:** Inline themes ([0bf1bfb](https://github.com/sfxcode/nuxt3-primevue-starter/commit/0bf1bfb))
545 | - **i18n:** Strategy no_prefix works again ([4a17b35](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4a17b35))
546 | - **validation:** Use password input ([2232ec8](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2232ec8))
547 | - **dataTable:** Add Icon Field to Inline search Icon in InputText ([2bd14b2](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2bd14b2))
548 | - **dataTable:** Add Icon Field to Inline search Icon in InputText ([b31090c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b31090c))
549 | - **layout:** Show icons if menubar is collapsed ([5df6262](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5df6262))
550 | - **formkit:** Simplify with useFormKitRepeater ([9ee8e53](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9ee8e53))
551 | - **validation:** Use FormKitDataEdit component ([00ad7f7](https://github.com/sfxcode/nuxt3-primevue-starter/commit/00ad7f7))
552 | - **ui:** Move sidebar to component and set collapsed width to 50px ([5b5e03c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5b5e03c))
553 | - **ui:** Add correct header on page ([c8b037e](https://github.com/sfxcode/nuxt3-primevue-starter/commit/c8b037e))
554 | - **ui:** Set sidebar width to 180px ([7f09b5a](https://github.com/sfxcode/nuxt3-primevue-starter/commit/7f09b5a))
555 | - **ui:** Minor tweaks ([dc1351b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/dc1351b))
556 | - Move Toast and ConfirmDialog Component to default layout ([2093887](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2093887))
557 | - Move Toast and ConfirmDialog Component to default layout ([dc796d8](https://github.com/sfxcode/nuxt3-primevue-starter/commit/dc796d8))
558 | 
559 | ### 📖 Documentation
560 | 
561 | - **README:** Changed latest node LTS to 18 ([c17cd77](https://github.com/sfxcode/nuxt3-primevue-starter/commit/c17cd77))
562 | - **README:** Add some missing links ([665bdfa](https://github.com/sfxcode/nuxt3-primevue-starter/commit/665bdfa))
563 | - **PrimeVue:** Notice new Version 3.30 ([4f8964c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4f8964c))
564 | - **update:** Update Versions ([54822ed](https://github.com/sfxcode/nuxt3-primevue-starter/commit/54822ed))
565 | - **update:** Update Versions ([d0859d9](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d0859d9))
566 | - **update:** Update Versions ([e77b371](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e77b371))
567 | - **update:** Update Versions ([67be430](https://github.com/sfxcode/nuxt3-primevue-starter/commit/67be430))
568 | - **update:** Update Versions ([e013459](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e013459))
569 | - **update:** Update theme to aura ([2b22921](https://github.com/sfxcode/nuxt3-primevue-starter/commit/2b22921))
570 | - **update:** Update Versions ([41a4a22](https://github.com/sfxcode/nuxt3-primevue-starter/commit/41a4a22))
571 | - **update:** Update Versions ([33a5f30](https://github.com/sfxcode/nuxt3-primevue-starter/commit/33a5f30))
572 | - **README:** Add link to nuxt test utils ([58befbd](https://github.com/sfxcode/nuxt3-primevue-starter/commit/58befbd))
573 | 
574 | ### 🏡 Chore
575 | 
576 | - **Initial:** First Commit ;-) ([9a90b34](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9a90b34))
577 | - **CI:** Add Github ([e19ab08](https://github.com/sfxcode/nuxt3-primevue-starter/commit/e19ab08))
578 | - **CI:** Add Github ([4404fd3](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4404fd3))
579 | - **CI:** Add Github ([253ebac](https://github.com/sfxcode/nuxt3-primevue-starter/commit/253ebac))
580 | - **CI:** Add Github ([b967355](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b967355))
581 | - **CI:** Add Github ([f39bd1b](https://github.com/sfxcode/nuxt3-primevue-starter/commit/f39bd1b))
582 | - **CI:** Add Github ([b28b0b1](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b28b0b1))
583 | - **dependencies:** Nuxt 3 RC3 ([d7af4fa](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d7af4fa))
584 | - **dependencies:** Nuxt 3 RC3 ([5e56bd2](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5e56bd2))
585 | - **dependencies:** Nuxt 3 RC3 ([a45e482](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a45e482))
586 | - **dependencies:** Nuxt 3 RC3 ([992b6e3](https://github.com/sfxcode/nuxt3-primevue-starter/commit/992b6e3))
587 | - **dependencies:** Updates and Linting ([8ad7137](https://github.com/sfxcode/nuxt3-primevue-starter/commit/8ad7137))
588 | - **github:** Set node version to 18 ([4a6d1fc](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4a6d1fc))
589 | - **github:** Set node version to 18 ([8458605](https://github.com/sfxcode/nuxt3-primevue-starter/commit/8458605))
590 | - **deploy:** Update netlify settings ([4564885](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4564885))
591 | - **deploy:** Update netlify settings ([3371ec8](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3371ec8))
592 | - **workflows:** Set pnpm version to 8.2.0 ([b57ec6e](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b57ec6e))
593 | - **eslint:** Switch to eslint-config-typescript ([3fe2147](https://github.com/sfxcode/nuxt3-primevue-starter/commit/3fe2147))
594 | - **release:** Mark 1.8.0 release - first release using original primevue-nuxt ([34737e7](https://github.com/sfxcode/nuxt3-primevue-starter/commit/34737e7))
595 | - **release:** Mark 1.8.0 release - first release using original primevue-nuxt ([008c501](https://github.com/sfxcode/nuxt3-primevue-starter/commit/008c501))
596 | - Add postinstall script for generating types ([d13a4d5](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d13a4d5))
597 | - **update:** Update dependencies and prepare for nuxt 4 directory structure ([5f1e835](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5f1e835))
598 | - **update:** Update dependencies and remove editor ([5b97fb8](https://github.com/sfxcode/nuxt3-primevue-starter/commit/5b97fb8))
599 | - **update:** Update dependencies and prepare for nuxt 4 directory structure - content in base path ([a636fee](https://github.com/sfxcode/nuxt3-primevue-starter/commit/a636fee))
600 | - **update:** Update to PrimeVue 4 ([ad777e4](https://github.com/sfxcode/nuxt3-primevue-starter/commit/ad777e4))
601 | - **update:** Update to PrimeVue 4 ([c399dbc](https://github.com/sfxcode/nuxt3-primevue-starter/commit/c399dbc))
602 | - **update:** Update to PrimeVue 4 ([d9c5a79](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d9c5a79))
603 | - **update:** Update to PrimeVue 4 ([9253e8c](https://github.com/sfxcode/nuxt3-primevue-starter/commit/9253e8c))
604 | - **update:** Update to PrimeVue 4 ([b092179](https://github.com/sfxcode/nuxt3-primevue-starter/commit/b092179))
605 | 
606 | ### ✅ Tests
607 | 
608 | - **Vitest:** Fix Nuxt Errors ([4005f06](https://github.com/sfxcode/nuxt3-primevue-starter/commit/4005f06))
609 | 
610 | ### 🎨 Styles
611 | 
612 | - **theme:** Switch Theme to Lara ([d5bcb43](https://github.com/sfxcode/nuxt3-primevue-starter/commit/d5bcb43))
613 | 
614 | ### ❤️ Contributors
615 | 
616 | - Sfxcode ([@sfxcode](http://github.com/sfxcode))
617 | - JianJroh <rhjian@foxmail.com>
618 | - Thomas Lamers <thomas.lamers@iwelt.de>
619 | 
620 | 


--------------------------------------------------------------------------------