{"id":18356522,"url":"https://github.com/lbwa/vue-auth-boilerplate","last_synced_at":"2026-03-27T03:39:52.040Z","repository":{"id":39552812,"uuid":"149974692","full_name":"lbwa/vue-auth-boilerplate","owner":"lbwa","description":"🔑 Vue.js scalable boilerplate with user authentication.","archived":false,"fork":false,"pushed_at":"2022-06-22T05:47:23.000Z","size":3681,"stargazers_count":36,"open_issues_count":7,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T00:09:08.243Z","etag":null,"topics":["access-control","admin-template","administration-dashboard","administrator-dashboard","authentication","boilerplate","console-boilerplate","dashboard","dynamic-routes","material-design","private-routes","route-protection","v-access","vue","vue-admin","vue-boilerplate","vue-cli","vue-router","vuejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbwa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-23T10:41:09.000Z","updated_at":"2024-10-31T03:28:13.000Z","dependencies_parsed_at":"2022-09-16T04:12:13.112Z","dependency_job_id":null,"html_url":"https://github.com/lbwa/vue-auth-boilerplate","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbwa%2Fvue-auth-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbwa%2Fvue-auth-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbwa%2Fvue-auth-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbwa%2Fvue-auth-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbwa","download_url":"https://codeload.github.com/lbwa/vue-auth-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247484475,"owners_count":20946388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["access-control","admin-template","administration-dashboard","administrator-dashboard","authentication","boilerplate","console-boilerplate","dashboard","dynamic-routes","material-design","private-routes","route-protection","v-access","vue","vue-admin","vue-boilerplate","vue-cli","vue-router","vuejs","webpack"],"created_at":"2024-11-05T22:10:34.938Z","updated_at":"2026-03-27T03:39:52.002Z","avatar_url":"https://github.com/lbwa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eVue auth boilerplate\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/lbwa/vue-auth-boilerplate/actions\"\u003e\n    \u003cimg alt=\"github actions - tests\" src=\"https://github.com/lbwa/vue-auth-boilerplate/workflows/Tests/badge.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://lbwa.github.io/vue-auth-boilerplate\"\u003e\n    \u003cimg alt=\"github actions - deployment\" src=\"https://github.com/lbwa/vue-auth-boilerplate/workflows/Deployment/badge.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://nodejs.org/en/download/\"\u003e\n    \u003cimg alt=\"nodejs version\" src=\"https://img.shields.io/badge/Node.js%20Version-%3E=8.9.0-ff69b4?logo=node.js\u0026labelColor=3a424a\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n`Vue.js` console boilerplate with authentication.\n\n\u003c!-- TOC --\u003e\n\n- [Prerequisites](#prerequisites)\n- [Development](#development)\n- [Production build](#production-build)\n  - [CDN supporting](#cdn-supporting)\n- [User authentication](#user-authentication)\n- [Symbolic constants](#symbolic-constants)\n- [Environment variables](#environment-variables)\n- [Declarations](#declarations)\n- [Layouts](#layouts)\n  - [Use route-based layout](#use-route-based-layout)\n  - [Use non-route-based layout](#use-non-route-based-layout)\n- [Components](#components)\n- [Plugins](#plugins)\n- [Effects](#effects)\n- [Router](#router)\n  - [Route config](#route-config)\n- [State management](#state-management)\n  - [Automatic registration](#automatic-registration)\n  - [With request effects](#with-request-effects)\n  - [Handle error](#handle-error)\n  - [History store module](#history-store-module)\n- [Changelog](#changelog)\n- [License](#license)\n\n\u003c!-- /TOC --\u003e\n\n## Prerequisites\n\nPlease make sure you have installed [node.js](https://nodejs.org) version _8.9_ or above (the LTS version recommended).\n\n## Development\n\n- install all dependencies\n\n  ```bash\n  $ npm i\n  ```\n\n- start development server\n\n  ```bash\n  $ npm run serve\n  ```\n\n  Frontend server is running at `http://localhost:8080` and `http://\u003cYOUR_DEVICE_LOCAL_IP\u003e:8080` with [hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/).\n\n- run unit tests\n\n  ```bash\n  $ npm run test:unit\n  ```\n\n## Production build\n\n```bash\n$ npm run build\n# yarn build\n```\n\n### CDN supporting\n\nThis project production build has supported third-party CDN libraries out of the box. All JS/CSS library CDN urls should be recorded by [third-parties.js](./third-parties.js). syntax like:\n\n```ts\ninterface CDNUrl {\n  name: string // required for js, npm package name\n  library: string // required for js, global variable name in the browser\n  js: string // js cdn file urls\n  css: string // css cdn file urls\n}\n```\n\n- JS libraries\n\n  ```diff\n  const thirdParties = [\n    // ... other js/css libraries\n  +  {\n  +    name: 'vue',\n  +    library: 'Vue',\n  +    js: 'https://cdn.jsdelivr.net/npm/vue@2.6.x/dist/vue.min.js'\n  +  }\n  ]\n  ```\n\n- Pure CSS libraries\n\n  step 1. You should import pure css libraries with tree-shaking.\n\n  ```diff\n  - import 'normalize.css'\n  + if (__DEV__) { // __DEV__ is an environment variable\n  +    require('normalize.css')\n  + }\n  ```\n\n  step 2. add css library CDN link into [third-parties.js](./third-parties.js).\n\n  ```diff\n  const thirdParties = [\n    // ... other js/css libraries\n  +  {\n  +    css: 'https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css'\n  +  }\n  ]\n  ```\n\n## User authentication\n\nPlease refer to `v-access` [documentation](https://github.com/lbwa/v-access#readme).\n\n## Symbolic constants\n\nA symbolic constant is a name given to a constant literal value. It's usually used to prevent [magic numbers][wiki-magic-number] and [hard-coding][wiki-hard-coding]. All symbolic constants should be recorded in the [src/constants.ts](src/constants.ts) file.\n\n- Q: When should I use symbolic constants?\n\n- A: [Feature flag](https://en.wikipedia.org/wiki/Feature_toggle), public settings, etc.\n\n[wiki-magic-number]: https://en.wikipedia.org/wiki/Magic_number_(programming)\n[wiki-hard-coding]: https://en.wikipedia.org/wiki/Hard_coding\n\n## Environment variables\n\nAll `node.js` use-defined environment should be record at the `\u003cPROJECT_ROOT\u003e/.env*` files and start with `VUE_APP_*` prefix character. You can find more details from the [@vue/cli](https://cli.vuejs.org/guide/mode-and-env.html) documentation.\n\n## Declarations\n\nAll global `TypeScript` declarations should be recorded in the [src/global.d.ts](src/global.d.ts) file.\n\nThis boilerplate has supported multiple declarations for CSS pre-process languages in [src/global.d.ts](src/global.d.ts).\n\n## Layouts\n\nIn practice, we perhaps have two different kinds of layout components. All layout components should be placed in the [src/layouts](src/layouts) directory.\n\n|           type           |       description        |      character       |\n| :----------------------: | :----------------------: | :------------------: |\n|   `route-based` layout   |  with `\u003crouter-view/\u003e`   | `src/layouts/R*.vue` |\n| `non-route-based` layout | without `\u003crouter-view/\u003e` | `src/layouts/L*.vue` |\n\n### Use route-based layout\n\nA valid router config should be based on the following structure:\n\n```ts\ninterface ConsoleRouteConfig extends RouteConfig {\n  meta?: Partial\u003c{\n    layout: string // which route-based layout need to be rendered\n    hidden: boolean\n    icon: string\n    title: string\n  }\u003e\n}\n```\n\nWe use `meta.layout` to decide which layout component we need to be rendered.\n\n### Use non-route-based layout\n\nAs opposed to `route-based` layout, you should always import `non-route-based` layout component manually.\n\n```ts\nimport { NonRouteBasedLayout } from '@/layouts/NonRouteBasedLayout'\n\nexport default {\n  name: 'AnyViewComponent',\n\n  components: {\n    NonRouteBasedLayout\n  }\n}\n```\n\n## Components\n\nWe also have multiple kinds of components and should be placed in [src/components](src/components) directory.\n\n| component type |                    description                    |              example              |      character       |\n| :------------: | :-----------------------------------------------: | :-------------------------------: | :------------------: |\n| presentational | represent user interface view excluding any state |          basic component          |     `Base*.vue`      |\n|   container    |        state including all business logic         | any sub `views/layouts` component | `[VIEW_PREFIX]*.vue` |\n\n## Plugins\n\nIf any `Vue.js` [plugin][doc-vue-plugin] exists, it should be placed in [src/plugins](src/plugins) directory.\n\n[doc-vue-plugin]: https://vuejs.org/v2/guide/plugins.html\n\n## Effects\n\nAll HTTP request function should be placed in [src/effects](src/effects) directory, and should be occurred by [Initiator](src/effects/initiator.ts) instance which has encapsulated `axios` creation and registered two interceptors automatically by default.\n\n```ts\nimport { createInitiator } from './initiator'\n\nconst { http } = createInitiator(/* support all AxiosRequestConfig */)\n\nexport function fetchUserProfile(username: string, password: string) {\n  return http.post('/user/profile', {\n    username,\n    password\n  })\n}\n```\n\nBased on [single responsibility principle][wiki-single-responsibility-principle] and better universality, every request route should be a singleton. All request or response errors should be handle by Http request consumer, instead of itself.\n\n[wiki-single-responsibility-principle]: https://en.wikipedia.org/wiki/Single_responsibility_principle\n\n## Router\n\n|  filename   |                     description                      |\n| :---------: | :--------------------------------------------------: |\n| `guards.ts` | store all [navigation guards][doc-navigation-guards] |\n| `index.ts`  |            export a `vue-router` instance            |\n| `routes.ts` |        record all valid preset static routes         |\n\n[doc-navigation-guards]: https://router.vuejs.org/guide/advanced/navigation-guards.html\n\n### Route config\n\nWe add serval `meta` properties for global navigation sidebar.\n\n```ts\ninterface ConsoleRouteConfig extends RouteConfig {\n  meta?: Partial\u003c{\n    layout: string // which route-based layout need to be rendered\n    hidden: boolean\n    icon: string\n    title: string\n  }\u003e\n}\n```\n\n| property name |                                description                                 |\n| :-----------: | :------------------------------------------------------------------------: |\n| `meta.layout` | Which [route-based layout](#Use%20route-based%20layout) should be rendered |\n| `meta.hidden` |       Whether route should be rendered by global navigation sidebar        |\n|  `meta.icon`  |     Route `material design` icon icon in the global navigation sidebar     |\n| `meta.title`  |                Route title in the global navigation sidebar                |\n\n_Note that_ Route only be rendered when `meta.title` and `meta.hidden` is truthy value.\n\n## State management\n\nWe use `Vuex` to implement global state management.\n\n[doc-vuex-actions]: https://vuex.vuejs.org/guide/actions.html#actions\n\n### Automatic registration\n\nAll store module placed in [src/store/modules/\\*.ts](src/store/modules) would be **registered automatically**. Every module would use their filename as store module namespace.\n\n### With request effects\n\n\u003e [Actions][doc-vuex-actions] can contain arbitrary asynchronous operations.\n\nAll HTTP requests should be called by an action if an HTTP request result needs to be stored in the vuex store, instead of calling HTTP request directly.\n\n```\ndispatch an action --\u003e http effects --\u003e commit mutation in an action --\u003e store the result of effects\n```\n\n### Handle error\n\n\u003e [store.dispatch][doc-vuex-dispatch] always return a `Promise` instance.\n\n[doc-vuex-dispatch]: https://vuex.vuejs.org/api/#dispatch\n\nAny action internal error should be handled by action consumer, instead of action itself.\n\n```\naction's error --\u003e throw --as rejected promise--\u003e handled by any action consumer\n```\n\n### History store module\n\nWe have a `history` ([store/modules/history.ts](src/store/modules/history.ts)) store module that used to record any visited `vue-route record` with `meta.title` field.\n\n## Changelog\n\nAll notable changes to this repository will be documented in [CHANGELOG](./CHANGELOG.md) file.\n\n## License\n\nMIT © [Bowen Liu](https://github.com/lbwa)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbwa%2Fvue-auth-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbwa%2Fvue-auth-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbwa%2Fvue-auth-boilerplate/lists"}