Vue 3 Template

About This Project
Stack
Setup
Development
Build
Deployment
Nice Things to Have
Features
To-do
Known Issues

About this project

I just wanted to create my own opinionated Vue project template. So i started from scratch, all the history is on this very same repo, mistakes and all.

Works best with Visual Studio Code, it has some rules set up on the same project. Eventually i will add some recommended plugins.

Stack

Made with TypeScript.
Vite For development and build.
Vue 3 as FrontEnd Library.
Vue Router for routing.
Pinia for State Management.

Setup

`.env`

Go to your Firebase Project and get your config file, then create a .env file with the following structure:

# Firebase Emulator Base URL
FIREBASE_EMULATOR_URL="http://localhost"
# Firebase Config
VITE_API_KEY=""
VITE_AUTH_DOMAIN=""
VITE_PROJECT_ID=""
VITE_STORAGE_BUCKET=""
VITE_MESSAGING_SENDER_ID=""
VITE_APP_ID=""

`.firebaserc`

{
  "projects": {
    "default": "your-project-name"
  }
}

Firebase Login

You must be logged onto the firebase-cli for deployment.

firebase login

Development

Runs the local vite web server and the firebase emulators.

yarn dev

Builds the project for development. Seves all the firebase emulators including hosting.

yarn dev:local

Build

Builds the project in development mode. Useful for debuging and testing.

yarn build:dev

Builds the project in production mode. Ready for deployment.

yarn build:prod

Deployment

This examples are integrated with firebase. But the build can be uploaded to any static server or cloud provider.

[IMPORTANT]: You must be logged in your firebase project and completed the setup of the project.

Full Deployment

A single command can deploy the whole project. This includes Firebase Hosting, Firebase Functions, Firestore Rules and Firebase Storage Rules.

yarn deploy

Per-service Deployment

If needed, you can deploy per-service:

# Deploys Hosting
yarn deploy:hosting

# Deploys Functions
yarn deploy:functions

# Deploys Firestore
yarn deploy:firestore

Further commands can be examined in the package.json file.

Nice Things to Have

Built with Vite and for fast performance on development.
Node version lock via nvm.
Built in Typescript with Javascript support for components and scripts, just use whatever you like.
Use the latest Vue3 features, script setup and composition api are fully supported.
Supports Pug as Template Lang, no more ugly html.
Eslint with a comprehensible set of rules from the VueJS Team and Airbnb.
Pre-commit lint checking with Husky.
Route and alias auto generation.
Support for 404 handler out of the box.
Named route support for components with the SFC <route> tag.
Layouts support.
State Management via Pinia 🍍
Component Auto Import
Naive UI as UI Framework
Auto Import & Automatic Tree Shaking - No more import ref from 'vue'!!!!
@vueuse installed and auto imported by default.

Also With VsCode

Convert HTML templates into Pug with one click.

Features

File Based Router

Provided by the vite-plugin-pages package.

The .vue files under the src/pages are mapped as a route.

Eslint Setup

We use the airbnb base guides for Js and TS. For Vue files we use the vue-essential guide.

VueJS has an issue declared where it won't check for the usage of the variables defined in the script when using the setup syntax. As a workaround the check of unused variables has been disabled for Vue files inside the /src folder.

Component Auto Import

Just use your components in your templates and they will be auto imported.

This plugin has been already setup with the Naive UI framework. So the components will be auto registered in the components.d.ts file and tree shaken automatically.

For documentation please visit: NaiveUI Docs

Icon Auto Import

By default Tabler Icons from Iconify are installed and auto imported as needed.

Check the icons at @iconify/tabler

<template lang="pug">
tabler-arrow-bar-right
</template>

Api Auto Import

Supports the following API's. For more information on the available auto imports refer click here.

Route aliasing

Provided by: vite-aliases npm package.

All folders under the src folder will be mapped as alias. The current structure of the folders will create the following aliases:

{
  @: './src',
  @assets: './src/assets',
  @components: './src/components',
  @layouts: './src/layouts',
  @pages: './src/pages',
  @store: './src/store'
}

As the project grows, more folders will be added and the tsconfig.json file will be updated with the new aliases.

Layouts

This template supports layouts via vite-plugin-vue-templates

If not defined, the route will use the default.vue layout.

To define a template for the route, you need to provide the template in the <route> block. In this case, the component will look for templates/custom.vue for it's layout. You can also name the route for named links.

<route lang="yaml">
meta:
  name: 'named-route'
  layout: custom
</route>

State management

Achieved using pinia

The src/store/demo.ts file has a fully working demo store. And the App.vue file uses this store.

Persisted state

For persisted state, you need to declare the value of the persisted state in your store. Refer to the src/store/demo.ts file for a working example.

TO-DO

Known Issues

.eslintrc.js: Added a temp fix for auto-imported API lint error on unplugin-auto-import - Github Issue
tsconfig.json Added "skipLibCheck": true to avoid build error on pinia-persist-plugin - Github Issue

themakunga/vue-firebase-template