Login

Tutorials & Examples

Step-by-step guides and practical examples for the Multi-tenant Theming System

Tutorials
Basic Theme Setup
Beginner
Team Theme Management
Beginner
Custom Theme Creation
Intermediate
Internationalization
Intermediate
Accessibility Implementation
Intermediate
Mobile Optimization
Intermediate
Laravel Nova Integration
Advanced
Advanced Customization
Advanced
Basic Theme Setup Tutorial

Learn how to set up the basic theming system in your Vue 3 + Nuxt 3 application.

Beginner
15 minutes
Tutorial Progress
0 of 14 steps completed (0%)
Step 1: Project Setup

First, we'll set up a new Nuxt 3 project with the required dependencies for theming.

1.1 Create New Nuxt Project
BASH
# Create a new Nuxt 3 project
npx nuxi@latest init my-theme-app

# Navigate to project directory
cd my-theme-app

# Install dependencies
npm install
1.2 Install Theming Dependencies
BASH
# Install theming dependencies
npm install vuetify @mdi/font
npm install @vueuse/core @vueuse/motion
npm install @nuxtjs/i18n vue-i18n
npm install pinia-plugin-persistedstate
npm install  focus-trap-vue

# Install development dependencies  
npm install -D sass @vitest/ui jsdom

Package Explanations:

vuetify
Vue 3 Material Design component framework
@vueuse/core
Collection of Vue Composition utilities
@nuxtjs/i18n
Internationalization for Nuxt
pinia-plugin-persistedstate
Persist Pinia store state
1.3 Project Structure

Create the following directory structure:

BASH
my-theme-app/
├── assets/
│   └── css/
│       ├── main.css
│       └── theme-variables.css
├── components/
│   └── Base/
│       ├── BaseButton.vue
│       └── BaseInput.vue
├── composables/
│   └── useTeamTheme.js
├── locales/
│   ├── en.json
│   └── sw.json
├── plugins/
│   └── vuetify.client.js
├── stores/
│   └── theme.js
├── i18n.config.ts
└── nuxt.config.ts
Checklist