Skip to content

MarsKubeX/vue-boilerplate

Repository files navigation

vue-boilerplate

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Description

This boilerplate has a grid to structure the views with a header, main and footer containers. It has also a simple example of store manager with Pinhia and is responsive for its menubar. There is a example of a vue composable for http requests.

Routes

There are 3 routes: "/login" (it is a fake login, just to add a form example), "/" (home, where there are some variables managed by the Pinia store manager) and "/about" (with a button to increment a counter in the home page. This is a Pinhia store example)

Road map

  • Responsive: there is a navbar that helps to have a responsive design.
  • Routing: there are some general routes.
  • State manager: Added Pinia as state manager.
  • Composables: there is one compasable for http requests.
  • Form example: There is a login form as example. It is just and example and it has not any log in functionality. I don't want to add a login functionality to the boilerplate since a lot of projects has not any login.
  • Custom types (TS interfaces).
  • Unit tests.
  • [...] Global css variables: Added theme css variables.
  • [...] BEM: block-element-modifier css style is yet to be improved
  • [...] Http requests config. Already have the composable to help with http requests
  • Guards.
  • ESLint and prettier config.
  • i18n
  • Style-lint config
  • Husky and lint-staged conig
  • Environment Varables (dot env)
  • Global error handling with toaster

About

A boilerplate for vue3 with pinia

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages