VueJs Kenya Starter Template

A Vue.js Kenya starter template built with TypeScript and packed with powerful features to kickstart your web application development.

Features

• 📁 File Based Routing: Each route in your application corresponds to a specific file or folder, simplifying route management and improving project organization.

• 🦾 TypeScript: Benefit from strong typing and enhanced developer productivity.

• 🔍 ESLint: Maintain code quality and consistency with ESLint for TypeScript.

• 🍍 Pinia: A state management solution for Vue.js.

• 🪟 Layouts: Pre-configured layouts for consistent page structure. -🛠️ Vite Devtools: Boost your development experience with Vite's devtool for inspecting and debugging your Vue application.

• ⚡️ Vitest: A fast modern testing framework for Vue 3.

• 🔥 Icons: Ready-to-use icons for your application.

• 📦 On Demand Imports: Optimize performance by loading components on demand.

• 🎨 Tailwind CSS: Utility-first CSS framework for efficient styling.

• 🧰 Ni: Ni is a package that enables you to use the right package manager for your project..

• 🧩 VueUse: A collection of Vue 3 composable functions.

• ⚙️ Zero Config Deploy: Deploy to Netlify without any configuration.

Pre-packed

UI Frameworks

• TailwindCss - Utility-first CSS framework for efficient styling.

Icons

• Iconify - Use your favourite icons from any icon sets 🔍Icônes

Plugins

• Vue Router
  • unplugin-vue-router - file based routing
  • vite-plugin-vue-meta-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible state management library for Vue applications.
• unplugin-vue-components - Components auto import
• unplugin-auto-import - Directly use Vue Composition APIs and third party APIs without importing.

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes and no semi-colons.

Dev tools

• TypeScript
• Vite DevTool
• Vitest - A fast unit testing framework powered by Vite.
• Pnpm - A fast and efficient disk space package manager.
• Ni - A package that enables you to use the right package manager for your project.
• VS Code Extensions
  • Vite - Fire up your Vite server automatically.
  • Volar - Vue 3 <script setup> IDE support.
  • Iconify IntelliSense - Icon inline display and autocomplete.
  • ESLint

Get started

You can create a repository with this template here

or if you prefer to do it manually with a clean git history you can do as demonstrated below:

npx degit https://github.com/Vuejs-Kenya/VueJs-Kenya-Starter-Template vuejs-kenya-starter-template

cd vuejs-kenya-starter-template

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Project setup

pnpm i

Development

pnpm run dev

Build

pnpm build

Builds your Vue application for production to the dist folder.

Enjoy ✨