Sakai

https://sakai.primevue.org
Admin
Sakai is a PrimeVue-based UI template and admin dashboard that showcases UI components, layouts and...
Tokens:1,329
Snippets:33
Trust Score:9.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install PrimeVue Dependencies

Source: https://sakai.primevue.org/start/documentation

Install PrimeVue, PrimeVue themes, Tailwind CSS Prime UI, PrimeIcons, and the PrimeVue Nuxt module.

```bash
npm install primevue @primevue/themes tailwindcss-primeui primeicons
npm install --save-dev @primevue/nuxt-module
```

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

### Clone and Run Sakai-Vue

Source: https://sakai.primevue.org/start/documentation

Clone the Sakai-Vue repository from GitHub, install dependencies, and run the development server.

```bash
git clone https://github.com/primefaces/sakai-vue
npm install
npm run dev
```

```bash
npm run dev
```

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

### Initialize Nuxt Project

Source: https://sakai.primevue.org/start/documentation

Create a new Nuxt project using the Nuxt CLI.

```bash
npx nuxi@latest init sakai-nuxt
```

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

### Configure PrimeVue Theme Options

Source: https://sakai.primevue.org/start/documentation

Set up the PrimeVue theme preset and dark mode selector in nuxt.config.js.

```javascript
import Aura from '@primevue/themes/aura';

primevue: {
    options: {
        theme: {
            preset: Aura,
            options: {
                darkModeSelector: '.app-dark'
            }
        }
    }
}
```

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

### Create Default Layout

Source: https://sakai.primevue.org/start/documentation

Define the default layout for your Nuxt application using AppLayout.

```vue
<script setup>
import AppLayout from './AppLayout.vue';
</script>

<template>
    <AppLayout />
</template>
```

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

### Configure Tailwind CSS Prime UI Plugin

Source: https://sakai.primevue.org/start/documentation

Add the tailwindcss-primeui package as a plugin in your tailwind.config.js file.

```javascript
plugins: [require('tailwindcss-primeui')]
```

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

### Add Custom CSS Files

Source: https://sakai.primevue.org/start/documentation

Include the Tailwind CSS and custom SCSS files in your Nuxt project's configuration.

```javascript
css: ['~/assets/tailwind.css', '~/assets/styles.scss']
```

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

### Configure PrimeVue Nuxt Module

Source: https://sakai.primevue.org/start/documentation

Add the PrimeVue Nuxt module to your nuxt.config.js file.

```javascript
modules: [
    '@primevue/nuxt-module',
]
```

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

### Replace Layout Composable

Source: https://sakai.primevue.org/start/documentation

Replace the default layout composable with the one from the Sakai-Vue project and remove the import statement.

```javascript
import { useLayout } from '@/layout/composables/layout';
// Remove this line
```

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

### Update App Component

Source: https://sakai.primevue.org/start/documentation

Modify the app.vue file to use NuxtLayout and NuxtPage for routing.

```vue
<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>
```
Tokens:
Raw