Portfolio Website Template

Portfolio Template built with vue.js

Run

# get pnpm
npm i -g pnpm

# install deps
pnpm i

# run dev server
pnpm dev

# build static site
pnpm build

Features

• ⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing - use Composition API and others directly

• 🖨 Server-side generation (SSG) via vite-ssg

• 🦔 Critical CSS via critters

• 🦾 TypeScript, of course

Pre-packed

UI Frameworks

• Bootstrap 5 (Bootstrap) - Build fast, responsive sites with Bootstrap

Icons

• FontAwesome - use amazimg icons the best icon sets

Plugins

• Vue Router
  • vite-plugin-pages - file system based routing
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• VueUse - collection of useful composition APIs
• @vueuse/head - manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• Prettier single quotes, no semi.

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• vite-ssg - Server-side generation
  • critters - Critical CSS
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • ESLint