{"id":16252275,"url":"https://github.com/daxchen/vue-firebase-starter","last_synced_at":"2026-02-28T11:43:03.448Z","repository":{"id":92370200,"uuid":"87446458","full_name":"DaxChen/vue-firebase-starter","owner":"DaxChen","description":"boilerplate of vue/vuex/vue(x)-router, with sass/prerendering, muse-ui, and firebase/firebaseui","archived":false,"fork":false,"pushed_at":"2017-05-03T04:32:07.000Z","size":295,"stargazers_count":41,"open_issues_count":0,"forks_count":17,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-03T06:23:53.937Z","etag":null,"topics":["boilerplate","firebase","firebase-auth","muse-ui","prerender","pwa","starter-kit","vue","vue-router","vuejs","vuex"],"latest_commit_sha":null,"homepage":"https://vue-firebase-starter.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DaxChen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-04-06T15:39:53.000Z","updated_at":"2022-07-11T03:13:15.000Z","dependencies_parsed_at":"2023-05-17T00:45:19.424Z","dependency_job_id":null,"html_url":"https://github.com/DaxChen/vue-firebase-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DaxChen/vue-firebase-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaxChen%2Fvue-firebase-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaxChen%2Fvue-firebase-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaxChen%2Fvue-firebase-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaxChen%2Fvue-firebase-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaxChen","download_url":"https://codeload.github.com/DaxChen/vue-firebase-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaxChen%2Fvue-firebase-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29932648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T09:58:13.507Z","status":"ssl_error","status_checked_at":"2026-02-28T09:57:57.047Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["boilerplate","firebase","firebase-auth","muse-ui","prerender","pwa","starter-kit","vue","vue-router","vuejs","vuex"],"created_at":"2024-10-10T15:13:02.180Z","updated_at":"2026-02-28T11:43:03.415Z","avatar_url":"https://github.com/DaxChen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003evue-firebase-starter\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/feross/standard\"\u003e\n    \u003cimg src=\"https://cdn.rawgit.com/feross/standard/master/badge.svg\" alt=\"Standard - JavaScript Style Guide\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nProgressive Web App (PWA) starter-kit using vue/vuex/vue(x)-router/offline-plugin, with sass, prerendering, muse-ui, and firebase/firebaseui!\n\u003c/p\u003e\n\n\n\n## Features\n\nEverything in `vue-cli:webpack` (hot reloading/vue file/webpack2/eslint/postcss+sass+stylus+less/...), plus:\n\n\u003c!--TODO: add emoji and links and descriptions--\u003e\n\n- vue / vuex / vue-router / vuex-router-sync\n- firebase\n- vuexfire\n- firebaseui\n- muse-ui\n- Offline Ready, Progressive Web App (PWA)\n- prerendering for better SEO\n\u003c!--TODO - tracking library with offline support--\u003e\n\n\n## [Online Demo](https://vue-firebase-starter.netlify.com/)\n\n\n## Build Commands\n\n``` bash\n# install dependencies\nyarn # or `npm install`\n\n# serve with hot reload at localhost:8080\nyarn dev # or `npm run dev`\n\n# build for production with minification and prerendering\nyarn build # or `npm run build`\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nyarn run unit # or `npm run unit`\n\n# run e2e tests\nyarn run e2e # or `npm run e2e`\n\n# run all tests\nyarn test # or `npm test`\n```\n\nFor detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n\n## Folder Structure\n\nThe folder structure is basically the same as `vue-cli`'s `webpack` template.\n\n[Check the folder structure of the docs here.](http://vuejs-templates.github.io/webpack/structure.html)\n\n```\n├── build           # webpack config files\n├── config          # project config (mainly used by webpack)\n├── dist            # production bundled files when `npm run build`\n├── node_modules    # npm dependencies\n├── src             # the main src folder, see below for detail\n├── static          # pure static assets (directly copied)\n├── test            # unit tests and e2e tests\n├── index.html      # the index.html template, used by html-webpack-plugin\n└── package.json    # package info, build scripts and npm dependencies\n```\n\n```\nsrc\n├── assets              # module assets (processed by webpack)\n├── components          # ui components\n├── router              # vue-router routes\n├── sass                # sass styles, _variables and _mixins\n├── store               # vuex setting, store and modules\n├── views               # also called `containers`, see below\n├── App.vue             # main app component\n├── initFirebase.js     # firebase settings, put your apiKeys here\n├── main.js             # the entry point\n├── muse-ui-theme.less  # muse-ui theme settings\n└── pwa.js              # progressive web app (offline-plugin) runtime\n```\n\nTo understand the difference between `components` and `views` (or `containers`), check out [this article](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) by redux author [Dan Abramov (@gaearon)](https://github.com/gaearon).\n\nYou can rename the `views` to `containers` if you prefer : )\n\n## Development\n\n### Muse-UI Theme\n\nMuse-UI currently only support theme settings using less.\nCheck out [the docs](http://www.muse-ui.org/#/theme) and change variables in [this file `src/muse-ui-theme.less`](https://github.com/DaxChen/vue-firebase-starter/blob/master/src/muse-ui-theme.less).\n\nYou can use [the color palette from material design colors](https://material.io/guidelines/style/color.html), watch the video to learn how to choose them.\n\n### Webpack Settings\n\n#### Globals Variables\n\n##### `__DEV__`\nThere is a `__DEV__` variable that is defined by webpack, and will be replaced during compile time.\nTherefore, you can use this in your code to separate debug code and production code.\n\nFor example, this\n\n```js\nif (__DEV__) {\n  window.firebase = firebase\n}\n```\n\nwill make window.firebase available during development for easier debugging, but will be trimmed out when building for produciton.\n\n#### Aliases\n\n##### `@` = `src`\n\nWhen importing, the `@` sign is aliased to `src` directory, so no need to use `../../../` in nested directories anymore, just use `@/store`, `@/components`, etc.\n\n#### Static folder path\n\nDifferent from the [default settings of vue-cli webpack template](https://vuejs-templates.github.io/webpack/static.html), I changed the `assetsSubDirectory` from `'static'` to `''`.\nThis means that everything you put in the `static/*` folder will be copied to the root of `dist/*`, instead of `dist/static/*`.\n\nI did this because Netlify's `_redirects` needs to be in the root of the published directory `dist/`, see the following `Deploy/Netlify` section for more info.\n\n### Progressive Web App (PWA)\n\n**The offline-plugin is only used in production build.**\n\nThanks to the awesome [offline-plugin](https://github.com/NekR/offline-plugin), vue-firebase-starter is offline ready! It uses ServiceWorker and fallbacks to AppCache to cache webpack output assets (or other assets if specified).\n\n[To understand the life-cycle of ServiceWorker and how it is updated, check out this awesome video.](https://youtu.be/TF4AB75PyIc)\n\nFor more information, [check out offline-plugin's docs](https://github.com/NekR/offline-plugin/#docs).\n\n\u003c!--TODO: explain `externals` and AppCache's FALLBACK page.--\u003e\n\n### Prerendering\n\nvue-firebase-starter uses [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) to prerender html when building for production.\n\nBecause prerender will generate rendered DOM into html, and vue needs to be able to take control after, [make sure the root component has the same id as the element it's replacing](https://github.com/chrisvfritz/prerender-spa-plugin#caveats).\n\n\n## Deployment\n\n### favicon\n\nI recommend http://realfavicongenerator.net/, the best favicon generator I've used!\n\nJust follow the instruction and put the extracted files in the `static/` folder, and override the `\u003chead\u003e\u003c/head\u003e` section in `index.html`.\n\n### Netlify\n\nI highly recommend you try out [Netlify](https://www.netlify.com/) if you haven't!\n\nJust signup, choose your `GitHub/GitLab/BitBucket` account and repo, put in two settings:\n\n- build command: `yarn build`\n- Publish directory: `dist`\n\nAnd you're all set! Every time you push to the chosen branch, you're site rebuilds and deploys automatically!\n\n#### _redirects\n\nTo use Netlify with vue-router (or any other SPA), we need to setup a `_redirects` file in the root of the published directory (NOT the root of project).\n\nThis is already done for you, check out `statics/_redirects`.\n\n\u003c!--## Muse-ui\nComponents are loaded separately to minimize the bundle size,\ntherefore, you'll need to import component and register them one by one when using.\n\nTo import a component, there is a webpack alias `@muse-ui` which points to `muse-ui/src`.\nSo take the header component for example\n(see `src/components/MyHeader.vue` for full source):\nYou'll need to import every muse-ui components that you want to use,\nand register them in the components section:\n\n```js\nimport MuAppbar from '@muse-ui/appBar'\nimport MuFlatButton from '@muse-ui/flatButton'\nimport MuIconMenu from '@muse-ui/iconMenu'\nimport { menuItem as MuMenuItem } from '@muse-ui/menu'\n\nexport default {\n  components: {\n    MuAppbar,\n    MuFlatButton,\n    MuIconMenu,\n    MuMenuItem\n  }\n}\n```\n\nNote:\n1. In order to use `\u003cmu-flat-button /\u003e` in html, I use the name `MuFlatButton`\nto register, because [vue converts camelCase in js to kebab-case in html](https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case)\n2. As you can see in the import section, the path starts with `@muse-ui` instead of just `muse-ui`, as mentioned earlier. But how do I know what the name is for each component? Well, [they're all in the `muse-ui/src` folder](https://github.com/museui/muse-ui/tree/master/src), so you have to find them in there by yourself... (see how `menuItem`'s location is so hidden...)--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaxchen%2Fvue-firebase-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaxchen%2Fvue-firebase-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaxchen%2Fvue-firebase-starter/lists"}