From 5f951584c74031670ca9654f893bc4370c336b87 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 20 Jan 2025 14:52:48 +0300 Subject: [PATCH] Add Sakai-Vue to a Nuxt Project section added --- src/views/pages/Documentation.vue | 81 +++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) diff --git a/src/views/pages/Documentation.vue b/src/views/pages/Documentation.vue index 207b187..2172cf1 100644 --- a/src/views/pages/Documentation.vue +++ b/src/views/pages/Documentation.vue @@ -45,6 +45,87 @@ npm run dev CSS variables used in the template derive their values from the PrimeVue styled mode presets, use the files under assets/layout/_variables.scss to customize according to your requirements.

+ +
Add Sakai-Vue to a Nuxt Project
+

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:

+