> DOCUMENTATION

Vue.js Installation Guide

Get your Vue 3 template running with Composition API, Vite, and Tailwind CSS.

> Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.0+ — Download here
npm (comes with Node.js) or yarn or pnpm
A code editor like VS Code with Volar extension (recommended)
A modern web browser (Chrome, Firefox, Safari, or Edge)

To verify your installation:

terminal

node --version
npm --version

> Installation Steps

Step 1: Download Your Template

After downloading your template, extract the .zip file to your projects folder:

terminal

# Navigate to your projects directory
cd ~/Projects

# Extract the template (replace with your actual filename)
unzip aurora_spectrum_ai-technology-aurora-vue.zip
cd aurora_spectrum_ai-technology-aurora

Package Contents:

src/views/ — Page components (IndexView.vue, AboutView.vue, etc.)
src/components/ — Reusable UI components (Text, Button, Image, Link, etc.)
src/lib/data/ — Content data file (content.js)
src/router/ — Vue Router configuration (index.js)
src/assets/ — CSS files (main.css)
src/App.vue — Root component
public/ — Static assets folder
vite.config.js — Vite configuration
tailwind.config.js — Tailwind CSS settings
package.json — Project dependencies

Step 2: Install Dependencies

Install all required packages using your preferred package manager:

Using npm (recommended):

terminal

npm install

Using yarn:

terminal

yarn install

Using pnpm (fastest):

terminal

pnpm install

What gets installed:

• Vue 3.x (Composition API)
• Vue Router 4.x
• Vite (build tool)
• Tailwind CSS
• Lucide Vue (icons)
• TypeScript (optional)

Installation time: 1-2 minutes

Step 3: Start the Development Server

Launch the Vite development server:

terminal

npm run dev

Or with yarn/pnpm: yarn dev / pnpm dev

Expected output:

VITE v5.0.0  ready in 300 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.x:5173/
➜  press h + enter to show help

Features enabled:

• Hot Module Replacement (HMR) — instant updates
• Vue Devtools support
• Optimized dependency pre-bundling
• Single File Components (.vue)

Step 4: View Your Site

Open your browser and navigate to:

http://localhost:5173

Your Vue site is now running! Any changes you make will automatically appear in the browser.

> Building for Production

Create an optimized production build:

terminal

npm run build

This process:

1. Compiles Vue SFCs to optimized JavaScript
2. Tree-shakes unused code
3. Minifies and compresses all assets
4. Creates the dist/ folder

Preview the production build locally:

terminal

npm run preview

> Deployment Options

Option 1: Vercel (Recommended)

Easiest deployment — takes 2 minutes:

Push your code to GitHub/GitLab/Bitbucket
Go to vercel.com
Click "Import Project"
Select your repository
Click "Deploy" (Vercel auto-detects Vite)

Your site is live! Get a free .vercel.app domain + automatic deployments.

Option 2: Netlify

Build locally: npm run build
Go to netlify.com
Drag and drop the dist/ folder

Option 3: GitHub Pages

1. Add base path to vite.config.ts:

vite.config.ts

export default defineConfig({
  base: '/your-repo-name/',
  // ... rest of config
})

2. Build and deploy:

terminal

npm run build
npx gh-pages -d dist

> Customization Guide

Changing Colors & Branding

Edit tailwind.config.js:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0891B2',
        secondary: '#F97316',
        accent: '#8B5CF6',
      },
    },
  },
}

Adding Routes (Vue Router)

Routes are defined in src/router/index.ts:

router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Services from '@/views/Services.vue' // New page

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/services', component: Services }, // New route
  ],
})

export default router

Creating Vue Components

Create Single File Components (.vue) in src/components/:

Button.vue

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  variant?: 'primary' | 'secondary'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary'
})

const emit = defineEmits<{
  (e: 'click'): void
}>()
</script>

<template>
  <button
    :class="[
      'px-4 py-2 rounded-lg font-medium',
      variant === 'primary'
        ? 'bg-blue-600 text-white hover:bg-blue-700'
        : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
    ]"
    @click="emit('click')"
  >
    <slot />
  </button>
</template>

Using Composables

Create reusable logic in src/composables/:

useCounter.ts

// src/composables/useCounter.ts
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initial
  
  return { count, increment, decrement, reset }
}

// Usage in component:
// const { count, increment } = useCounter(10)

> Troubleshooting

Error: Port 5173 is already in use

Option 1: Use a different port

terminal

npm run dev -- --port 3000

Option 2: Kill the existing process

terminal

# macOS/Linux
lsof -ti:5173 | xargs kill -9

Error: Cannot find module 'vue'

terminal

# Remove and reinstall dependencies
rm -rf node_modules package-lock.json
npm install

Problem: VS Code not recognizing .vue files or showing errors

Install the Volar extension
Disable the old Vetur extension if installed
Reload VS Code window (Cmd/Ctrl + Shift + P → "Reload Window")

Problem: Refreshing a route returns 404

For Netlify, create a _redirects file in public/:

public/_redirects

/*    /index.html   200

> File Structure Reference

your-template/
├── src/
│   ├── main.ts              # Entry point
│   ├── App.vue              # Root component
│   ├── components/          # Reusable components
│   │   ├── Header.vue
│   │   ├── Footer.vue
│   │   └── Button.vue
│   ├── views/               # Page components
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   └── Contact.vue
│   ├── router/              # Vue Router config
│   │   └── index.ts
│   ├── composables/         # Reusable logic
│   └── assets/              # Component assets
├── public/                  # Static assets
├── vite.config.ts          # Vite configuration
├── tailwind.config.js      # Tailwind CSS configuration
└── package.json            # Dependencies & scripts

> Available Scripts

Command	Description
`npm run dev`	Start development server (port 5173)
`npm run build`	Create optimized production build
`npm run preview`	Preview production build locally
`npm run type-check`	Run TypeScript type checking

> Additional Resources

Vue.js Documentation

Official Vue 3 docs and guides

Vue Router

Official router for Vue.js

Vite Documentation

Next-generation frontend tooling

Tailwind CSS Docs

Utility-first CSS framework

Estimated Setup Time: 3-5 minutes | Deployment Time: 2-5 minutes

Next Steps: Customize your content, deploy, and launch.

← Back to Installation Guides Next.js Guide React Guide SvelteKit Guide