Devstack: Vue 3 + Typescript + Vite + Naive UI (BE: NestJS)

This dashboard template should help get you started developing with Vue 3 in Vite (+ NaiveUI).

This template is based on a nodeJS back-end (NestJS) available here for authentication, authorization and data example.

What does this template include (dependencies)

• Vue 3: Template is completly build with latest vue 3 features like Single file component and <script setup> mode which makes your code much more clean and readable.
• Vite: Next Generation Frontend Tooling
• Naive UI: A Vue 3 Component Library
• Pinia Store: Intuitive, type safe and flexible Store for Vue
• Vue Router
• Typescript: The whole project is written with typescipt modular form.

Features

• Authentication and authorization with a nodeJS (NestJS) back-end

• Fetching user after a manual page refresh

• Preloader while fetching user data

• HTTP requests with axios

• Authorization (JWT Token)

  • Access token
  • Refresh token
  • Auth refresh token

• Users

  • List
  • Create
  • View

• More to come

Project Setup

We recommend using yarn

edit .env with your API URL

npm install
yarn install

Compile and Hot-Reload for Development

npm run dev
yarn dev

Type-Check, Compile and Minify for Production

npm run build
yarn build

Lint with ESLint

npm run lint
yarn lint

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).