Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devstack-be/vue3-vite-naiveui-template
Template based on Vue 3 + Vite + Naive UI (BE: NestJS)
https://github.com/devstack-be/vue3-vite-naiveui-template
jwt jwt-authentication jwt-token naive-ui naiveui pinia piniajs vite vitejs vue-router4 vue3 vue3-composition-api vue3-template
Last synced: 11 days ago
JSON representation
Template based on Vue 3 + Vite + Naive UI (BE: NestJS)
- Host: GitHub
- URL: https://github.com/devstack-be/vue3-vite-naiveui-template
- Owner: devstack-be
- License: mit
- Created: 2022-05-30T22:22:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-29T15:16:51.000Z (almost 2 years ago)
- Last Synced: 2023-03-10T06:51:52.643Z (over 1 year ago)
- Topics: jwt, jwt-authentication, jwt-token, naive-ui, naiveui, pinia, piniajs, vite, vitejs, vue-router4, vue3, vue3-composition-api, vue3-template
- Language: Vue
- Homepage:
- Size: 6.47 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/devstack-be/nestjs-jwt-mysql-api) 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 `` mode which makes your code much more clean and readable.
- [Vite](https://github.com/vitejs/vite): Next Generation Frontend Tooling
- [Naive UI](https://github.com/TuSimple/naive-ui): A Vue 3 Component Library
- [Pinia Store](https://github.com/vuejs/pinia): Intuitive, type safe and flexible Store for Vue
- [Vue Router](https://github.com/vuejs/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
``
```sh
npm install
yarn install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
yarn dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
yarn build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
yarn lint
```
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).