{"id":18623569,"url":"https://github.com/codica2/vue-app-best-practice","last_synced_at":"2025-07-02T15:32:09.900Z","repository":{"id":98304161,"uuid":"164842558","full_name":"codica2/vue-app-best-practice","owner":"codica2","description":"Vue application sample with all the best practices","archived":false,"fork":false,"pushed_at":"2019-04-12T08:33:06.000Z","size":299,"stargazers_count":39,"open_issues_count":1,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-11T13:10:41.559Z","etag":null,"topics":["javascript","vue","vue-cli-3","vuex"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/codica2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-09T10:36:33.000Z","updated_at":"2024-12-18T16:58:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"241e5ab7-ba18-409f-a7e9-97d6d4ac0498","html_url":"https://github.com/codica2/vue-app-best-practice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codica2/vue-app-best-practice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fvue-app-best-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fvue-app-best-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fvue-app-best-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fvue-app-best-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codica2","download_url":"https://codeload.github.com/codica2/vue-app-best-practice/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fvue-app-best-practice/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263165779,"owners_count":23424006,"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":["javascript","vue","vue-cli-3","vuex"],"created_at":"2024-11-07T04:25:03.961Z","updated_at":"2025-07-02T15:32:09.888Z","avatar_url":"https://github.com/codica2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eVue base template\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"http://www.opensource.org/licenses/mit-license.php\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Bandler-Webpack-%238DD6F9.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/View-Vue-brightgreen.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/State-Vuex-green.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Routing-Vue_router-yellowgreen.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tool-Single_file_components-434cbc.svg\"\u003e\n\u003c/a\u003e\n\n\u003c/p\u003e\n\n## Description\n\nVue application created with [Vue-cli](https://cli.vuejs.org/), [Vuex](https://vuex.vuejs.org/) for state management and [Vue-router](https://router.vuejs.org/) for routing.\n\n## Project installation\n##### Clone project\n\n```\ngit clone [link]\n```\n#### Install dependencies\n```\nyarn\n```\n#### Start server\n\n```\nyarn serve\n```\n#### For production build\n```\nyarn build\n```\n#### If you want to customize the project - run `vue ui` and select the current project.\nFor this command, you need `vue-cli 3`. In case you don’t have this package installed, run the following command or find out the step-by-step tutorial using [official documentation](https://cli.vuejs.org/guide/installation.html). \n\nRemove vue-cli 2\n```\nyarn global remove vue-cli\n```\nInstall `vue-cli 3` with a global flag\n```\nyarn global add @vue/cli\n```\nCheck version\n```\nvue --version\n```\n\n## File structure\n\n```\n├public/            =\u003e Any static assets are placed here.\n├src/\n| ├─api/            =\u003e API functions\n| ├─assets/         =\u003e Folder for relative path files’ import\n| ├─components/     =\u003e Global components\n| ├─directives/     =\u003e Custom directives\n| ├─icons/          =\u003e SVG icons\n| ├─mixins/         =\u003e Global mixins\n| ├─router/         =\u003e Vue-router\n| ├─store/          =\u003e Vuex\n| ├─styles/         =\u003e Global styles\n| ├─utils/          =\u003e Global constants and helper functions\n| ├─views/          =\u003e Layouts for view\n| ├─App.vue         =\u003e Main component\n| └─main.js         =\u003e Main JS file\n└static/            =\u003e Folder for static path files import\n```\n\n## Vuex structure\n\nVuex store is divided into modules. Each module has a main file `index.js` where Vuex patterns are gathered in `actions`, `mutations` and `getters`.\n\n\n```\nstore/\n├─modules/\n|  └─bar/\n|     ├─actions.js\n|     ├─mutations.js\n|     ├─getters.js\n|     └─index.js\n├──app.js\n├─getters.js\n├─mutations-types.js\n└─index.js\n```\n\nModules are installed in the `index.js` file, which is in the `Store` root folder.\nThe `getters.js` file is global to get application states.\nFile with name `mutations-types.js` has names of mutations constants.\n```js\n/* ... */\nimport app from './modules/app'\nimport bar from './modules/bar'\nimport getters from './getters'\n/* ... */\n\nVue.use(Vuex)\n\nconst store = new Vuex.Store({\n  modules: {\n    app,\n    bar\n  },\n  getters\n})\n\nexport default store\n\n```\n\n### About Actions\nTo handle asynchronous actions we usually use [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype)\n```js\nimport API from '@/api/index'\n\nexport const actions = {\n  AsyncAction: ({ dispatch, commit }, payload) =\u003e {\n    API.fetch(payload.method, payload.path, payload.data)\n      .then(response =\u003e {\n        commit('MUTATION_TYPE', response)\n      })\n      .catch(error =\u003e {\n        dispatch('FailResponse', error)\n      })\n  },\n  Action: ({ commit }, payload) =\u003e {\n  \tcommit('MUTATION_TYPE', payload)\n  }\n}\n\n```\n\n### About directives\nA directive is a special token in the markup that tells the library to take some `actions` to a DOM element.\nAll custom `directives` are in different folders and are imported only if they are used in the `component`.\n```js\nimport directive from './directive'\n\nconst install = (Vue) =\u003e {\n  Vue.directive('directive', directive)\n}\n\nif (window.Vue) {\n  window['directive'] = directive\n  Vue.use(install)\n}\n\ndirective.install = install\nexport default directive\n```\n\n### Component SvgIcon\nComponent `icons` are resolved as global for using in different components.\nAfterwards, all the SVG icons become Vue components.\n\n```vue\n// SvgIcon.vue\n\u003ctemplate lang=\"pug\"\u003e\n  component(:is=\"iconClass\" :class=\"svgClass\")\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Vue from 'vue'\n\nexport default {\n  name: 'SvgIcon',\n  props: {\n    iconClass: {\n      type: String,\n      required: true\n    },\n    className: {\n      type: String,\n      default: ''\n    }\n  },\n  computed: {\n    svgClass() {\n      if (this.className) {\n        return 'svg-icon ' + this.className\n      } else {\n        return 'svg-icon'\n      }\n    }\n  },\n  created() {\n    Vue.component(this.iconClass, () =\u003e import(`@/icons/svg/${this.iconClass}.svg`))\n  }\n}\n\u003c/script\u003e\n```\n\n```js\nimport Vue from 'vue'\nimport SvgIcon from '@/components/SvgIcon'\n\n// register globally\nVue.component('svg-icon', SvgIcon)\n\n// main.js\n\nimport './icons'\n```\n\n### About request\nFor all the requests we are using `axios`. Create an `axios instance` for using base request template.\n```js\nimport axios from 'axios'\n\nconst service = axios.create({\n  baseURL: process.env.VUE_APP_BASE_API,\n  headers: {\n    'Access-Control-Allow-Origin': '*',\n    'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',\n    'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'\n  },\n  timeout: 5000\n})\nservice.interceptors.request.use(\n  config =\u003e {\n    return config\n  },\n  error =\u003e {\n    console.log(error)\n    Promise.reject(error)\n  }\n)\nservice.interceptors.response.use(\n  response =\u003e response,\n  error =\u003e {\n    console.log('err' + error)\n    // Message({\n    //  message: error.message,\n    //  type: 'error',\n    //  duration: 5000\n    // })\n    return Promise.reject(error)\n  }\n)\n\nexport default service\n\n```\n## License\n vue-base-template is Copyright © 2015-2018 Codica. It is released under the [MIT License](https://opensource.org/licenses/MIT).\n \n## About Codica\n \n [![Codica logo](https://www.codica.com/assets/images/logo/logo.svg)](https://www.codica.com)\n \n We love open source software! See [our other projects](https://github.com/codica2) or [hire us](https://www.codica.com/) to design, develop, and grow your product.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodica2%2Fvue-app-best-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodica2%2Fvue-app-best-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodica2%2Fvue-app-best-practice/lists"}