To get started, create a Nuxt project.
+
+npx nuxi@latest init sakai-nuxt
+
+ Add Prime related libraries to the project.
+
+npm install primevue @primevue/themes tailwindcss-primeui primeicons
+npm install --save-dev @primevue/nuxt-module
+
+ Add PrimeVue-Nuxt module to nuxt.config.js
+
+modules: [
+ '@primevue/nuxt-module',
+]
+
+ Install Tailwind CSS with Nuxt using official documentation.
+ ++ Add tailwindcss-primeui package as a plugin to tailwind.config.js +
+
+plugins: [require('tailwindcss-primeui')]
+
+ Add PrimeVue to in nuxt.config.js
+
+import Aura from '@primevue/themes/aura';
+
+primevue: {
+ options: {
+ theme: {
+ preset: Aura,
+ options: {
+ darkModeSelector: '.app-dark'
+ }
+ }
+ }
+}
+
+ + Copy src/assets folder and paste them to assets folder to your Nuxt project. + And add to nuxt.config.js +
+
+css: ['~/assets/tailwind.css', '~/assets/styles.scss']
+
+ Change app.vue
+
+<template>
+ <NuxtLayout>
+ <NuxtPage />
+ </NuxtLayout>
+</template>
+
+ Create layouts/default.vue and paste this code:
+
+<script setup>
+import AppLayout from './AppLayout.vue';
+</script>
+
+<template>
+ <AppLayout />
+</template>
+
+ + Create layouts folder and copy src/layout folder and paste them. And then + create composables/use-layout.vue and replace it with + src/layout/composables/layout.js. Then remove this line: +
+
+import { useLayout } from '@/layout/composables/layout';
+
+ As a final step, copy the following folders:
+