├── .env.example
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.svg
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── css
    │   │   └── main.css
    ├── components
    │   ├── Dashboard.vue
    │   ├── Error404.vue
    │   ├── ForgotPassword.vue
    │   ├── Header.vue
    │   ├── Home.vue
    │   ├── SignIn.vue
    │   └── SignUp.vue
    ├── main.js
    ├── router
    │   └── routes.js
    └── store
    │   └── store.js
└── tailwind.config.js


/.env.example:
--------------------------------------------------------------------------------
1 | VUE_APP_HOST_NAME=http://example.com


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Auth Demo with Firebase
 2 | 
 3 | > A Vue.js project that provides a simple demo for securing pages with vue-router, Vuex and Firebase to handle authentication and user management.
 4 | 
 5 | **Please note you will need to add your own firebase credentials to the [config](https://github.com/garethredfern/vue-auth-demo/blob/master/src/main.js#L10).**
 6 | 
 7 | For detailed explanation on how things work read the following tutorials:
 8 | 
 9 | - [Authenticate Users Using Firebase & VueJS](https://redfern.dev/articles/authenticate-users-using-firebase-and-vuejs)
10 | - [How to Manage User State With Vuex and Firebase](https://redfern.dev/articles/manage-user-state-vuex-and-firebase)
11 | 
12 | To follow along with each of the blog posts the code has seperate branches for each step:
13 | 
14 | 1. [Basic Auth](https://github.com/garethredfern/vue-auth-demo/tree/basic-auth)
15 | 
16 | ## Build Setup
17 | 
18 | ```bash
19 | # install dependencies
20 | npm install
21 | 
22 | # serve with hot reload at localhost:8080
23 | npm run dev
24 | 
25 | # build for production with minification
26 | npm run build
27 | ```
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-auth-demo",
 3 |   "author": "Gareth Redfern <garethr@hey.com>",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "@firebase/app": "^0.6.10",
13 |     "core-js": "^3.6.5",
14 |     "firebase": "^7.19.1",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.2.0",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-plugin-router": "~4.5.0",
23 |     "@vue/cli-plugin-vuex": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/eslint-config-prettier": "^6.0.0",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-prettier": "^3.1.3",
29 |     "eslint-plugin-vue": "^6.2.2",
30 |     "prettier": "^1.19.1",
31 |     "tailwindcss": "^1.7.6",
32 |     "vue-template-compiler": "^2.6.11"
33 |   },
34 |   "prettier": {
35 |     "trailingComma": "es5",
36 |     "tabWidth": 2,
37 |     "semi": true,
38 |     "singleQuote": false
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "env": {
43 |       "node": true
44 |     },
45 |     "extends": [
46 |       "plugin:vue/essential",
47 |       "eslint:recommended",
48 |       "@vue/prettier"
49 |     ],
50 |     "parserOptions": {
51 |       "parser": "babel-eslint"
52 |     },
53 |     "rules": {}
54 |   },
55 |   "browserslist": [
56 |     "> 1%",
57 |     "last 2 versions",
58 |     "not dead"
59 |   ]
60 | }
61 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require("tailwindcss");
 2 | const autoprefixer = require("autoprefixer");
 3 | 
 4 | module.exports = {
 5 |   plugins: [
 6 |     tailwindcss("./tailwind.config.js"),
 7 |     autoprefixer({
 8 |       add: true,
 9 |       grid: true,
10 |     }),
11 |   ],
12 | };
13 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <circle cx="8" cy="8" r="8" fill="#FF00C7"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 7 |     <title>Vue Auth Demo</title>
 8 |   </head>
 9 |   <body>
10 |     <noscript>
11 |       <strong
12 |         >We're sorry but this website doesn't work properly without JavaScript
13 |         enabled. Please enable it to continue.</strong
14 |       >
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Header />
 4 |     <main class="container mx-auto py-5">
 5 |       <transition name="fade" mode="out-in">
 6 |         <router-view></router-view>
 7 |       </transition>
 8 |     </main>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import Header from "./components/Header.vue";
14 | 
15 | export default {
16 |   components: {
17 |     Header,
18 |   },
19 |   methods: {
20 |     setUser() {
21 |       this.$store.dispatch("setUser");
22 |     },
23 |   },
24 |   created() {
25 |     // when the app is created run the set user method
26 |     // this uses Vuex to check if a user is signed in
27 |     // check out mutations in the store.js file
28 |     this.setUser();
29 |   },
30 | };
31 | </script>
32 | 
33 | <style>
34 | @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700|Material+Icons");
35 | .fade-enter,
36 | .fade-leave-active {
37 |   opacity: 0;
38 | }
39 | 
40 | .fade-enter-active,
41 | .fade-leave-active {
42 |   transition: opacity 0.3s ease;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/assets/css/main.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | 
3 | @tailwind components;
4 | 
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/src/components/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h1 class="text-center mb-4 font-bold text-lg">Dashboard</h1>
 4 |     <article>
 5 |       <p class="bg-blue-100 p-5 border border-blue-200 rounded text-blue-500">
 6 |         This is the dashboard area which is secured via the router. A user must
 7 |         have an account and be logged in to view this page.
 8 |       </p>
 9 |       <div
10 |         class="bg-red-100 p-5 border border-red-200 rounded text-red-500 mt-5"
11 |         v-if="!user.emailVerified"
12 |       >
13 |         <p>
14 |           You need to verify your email address, please check
15 |           {{ user.email }} for an email. To resend the email click the button
16 |           below.
17 |         </p>
18 |         <p class="mt-4">
19 |           <button
20 |             type="button"
21 |             @click="sendVerifyEmail"
22 |             class="px-2 py-1 border rounded bg-red-100 border-red-500 hover:bg-red-200 transform transition duration-300 ease-in-out"
23 |           >
24 |             <transition name="fade" mode="out-in">
25 |               <span v-if="!emailSending">Resend</span>
26 |               <span v-else>Sending...</span>
27 |             </transition>
28 |           </button>
29 |         </p>
30 |       </div>
31 |     </article>
32 |   </section>
33 | </template>
34 | 
35 | <script>
36 | import firebase from "firebase";
37 | // You would obiusly use this component to show secure dashboard information.
38 | // As it stands it is just a simple Vue page with nothing intersting to show.
39 | 
40 | export default {
41 |   data() {
42 |     return {
43 |       error: null,
44 |       emailSending: false,
45 |     };
46 |   },
47 |   computed: {
48 |     user() {
49 |       return this.$store.getters.getUser;
50 |     },
51 |   },
52 |   methods: {
53 |     sendVerifyEmail() {
54 |       this.emailSending = true;
55 |       const user = firebase.auth().currentUser;
56 |       const actionCodeSettings = {
57 |         url: `${process.env.VUE_APP_HOST_NAME}/sign-in/?email=${user.email}`,
58 |       };
59 |       user
60 |         .sendEmailVerification(actionCodeSettings)
61 |         .then(() => {
62 |           this.emailSending = false;
63 |         })
64 |         .catch(error => {
65 |           this.emailSending = false;
66 |           this.error = error.message;
67 |         });
68 |     },
69 |   },
70 | };
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/components/Error404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h1 class="text-center mb-4 font-bold text-lg">404 Page Missing</h1>
 4 |     <article>
 5 |       <p class="bg-red-100 p-5 border border-red-200 rounded text-red-500">
 6 |         This page displays when a route doesn't exist.
 7 |       </p>
 8 |     </article>
 9 |   </section>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/ForgotPassword.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h1 class="text-center mb-4 font-bold text-lg">Forgot Password</h1>
 4 |     <article class="md:w-1/3 p-5 border rounded bg-gray-100 mx-auto">
 5 |       <transition name="fade">
 6 |         <p
 7 |           class="bg-red-100 p-5 my-5 border border-red-200 rounded text-red-500"
 8 |           v-if="error"
 9 |         >
10 |           {{ error }}
11 |         </p>
12 |       </transition>
13 |       <form @submit.prevent>
14 |         <div class="mb-4">
15 |           <label for="email" class="font-bold text-gray-700">Email</label>
16 |           <input
17 |             type="email"
18 |             placeholder="joe@bloggs.com"
19 |             v-model="email"
20 |             id="email"
21 |             class="bg-white px-4 py-2 border rounded w-full"
22 |             required
23 |           />
24 |         </div>
25 |         <div class="mb-4">
26 |           <button
27 |             type="submit"
28 |             @click="sendEmail"
29 |             class="bg-green-500 px-4 py-2 rounded text-white border border-green-600 transition duration-500 ease-in-out hover:bg-green-600"
30 |           >
31 |             <transition name="fade" mode="out-in">
32 |               <span v-if="!emailSending">Send</span>
33 |               <span v-else>Sending...</span>
34 |             </transition>
35 |           </button>
36 |         </div>
37 |       </form>
38 |     </article>
39 |   </section>
40 | </template>
41 | 
42 | <script>
43 | import firebase from "firebase";
44 | 
45 | export default {
46 |   data() {
47 |     return {
48 |       email: "",
49 |       error: null,
50 |       emailSending: false,
51 |     };
52 |   },
53 |   methods: {
54 |     sendEmail() {
55 |       if (!this.email) {
56 |         this.error = "Please type in a valid email address.";
57 |         return;
58 |       }
59 |       this.error = null;
60 |       this.emailSending = true;
61 |       firebase
62 |         .auth()
63 |         .sendPasswordResetEmail(this.email)
64 |         .then(() => {
65 |           this.emailSending = false;
66 |         })
67 |         .catch(error => {
68 |           this.emailSending = false;
69 |           this.error = error.message;
70 |         });
71 |     },
72 |   },
73 | };
74 | </script>
75 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="px-5 py-2 bg-gray-200 border-b">
 3 |     <div class="container mx-auto flex justify-between items-center">
 4 |       <nav class="flex items-center">
 5 |         <router-link to="/" class="mr-4">
 6 |           <i class="material-icons">
 7 |             home
 8 |           </i>
 9 |         </router-link>
10 |         <router-link to="dashboard" class="mr-4" v-if="user"
11 |           >Dashboard</router-link
12 |         >
13 |         <router-link to="sign-in" class="mr-4" v-if="!user"
14 |           >Sign-in</router-link
15 |         >
16 |         <router-link to="sign-up" class="mr-4" v-if="!user"
17 |           >Sign-up</router-link
18 |         >
19 |         <button @click="signOut" class="mr-4" v-if="user">Sign-out</button>
20 |       </nav>
21 |       <h2 v-if="user">{{ user.email }}</h2>
22 |     </div>
23 |   </header>
24 | </template>
25 | 
26 | <script>
27 | import firebase from "firebase";
28 | 
29 | export default {
30 |   computed: {
31 |     user() {
32 |       return this.$store.getters.getUser;
33 |     },
34 |   },
35 |   methods: {
36 |     signOut() {
37 |       firebase
38 |         .auth()
39 |         .signOut()
40 |         .then(() => {
41 |           this.$router.replace("sign-in");
42 |         });
43 |     },
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h1 class="text-center mb-4 font-bold text-lg">Home</h1>
 4 |     <article>
 5 |       <p class="bg-blue-100 p-5 border border-blue-200 rounded">
 6 |         This is the home page for the app, it is <strong>not secured</strong>.
 7 |       </p>
 8 |     </article>
 9 |   </section>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/SignIn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h1 class="text-center mb-4 font-bold text-lg">Sign-in</h1>
 4 |     <article class="md:w-1/3 p-5 border rounded bg-gray-100 mx-auto">
 5 |       <header>
 6 |         <h2 class="text-center">
 7 |           Sign in to Your Account
 8 |         </h2>
 9 |       </header>
10 |       <transition name="fade">
11 |         <p
12 |           class="bg-red-100 p-5 my-5 border border-red-200 rounded text-red-500"
13 |           v-if="error"
14 |         >
15 |           {{ error }}
16 |         </p>
17 |       </transition>
18 |       <form @submit.prevent>
19 |         <div class="mb-4">
20 |           <label for="email" class="font-bold text-gray-700">Email</label>
21 |           <input
22 |             type="email"
23 |             placeholder="joe@bloggs.com"
24 |             v-model="email"
25 |             id="email"
26 |             class="bg-white px-4 py-2 border rounded w-full"
27 |           />
28 |         </div>
29 |         <div class="mb-4">
30 |           <label for="password" class="font-bold text-gray-700">Password</label>
31 |           <input
32 |             type="password"
33 |             v-model="password"
34 |             id="password"
35 |             class="bg-white px-4 py-2 border rounded w-full"
36 |           />
37 |         </div>
38 |         <div class="mb-4 flex justify-between items-center">
39 |           <button
40 |             type="submit"
41 |             @click="signIn"
42 |             class="bg-green-500 px-4 py-2 rounded text-white border border-green-600 transition duration-500 ease-in-out hover:bg-green-600"
43 |           >
44 |             Sign-in
45 |           </button>
46 |           <router-link :to="{ name: 'forgotPassword' }" class="hover:underline"
47 |             >Forgot password</router-link
48 |           >
49 |         </div>
50 |       </form>
51 |     </article>
52 |   </section>
53 | </template>
54 | 
55 | <script>
56 | import firebase from "firebase";
57 | 
58 | export default {
59 |   data() {
60 |     return {
61 |       email: "",
62 |       password: "",
63 |       error: null,
64 |     };
65 |   },
66 |   methods: {
67 |     signIn() {
68 |       this.error = null;
69 |       firebase
70 |         .auth()
71 |         .signInWithEmailAndPassword(this.email, this.password)
72 |         .then(() => {
73 |           this.$router.replace("dashboard");
74 |         })
75 |         .catch(error => {
76 |           this.error = error.message;
77 |         });
78 |     },
79 |   },
80 | };
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/components/SignUp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h1 class="text-center mb-4 font-bold text-lg">Sign-up</h1>
 4 |     <article class="md:w-1/3 p-5 border rounded bg-gray-100 mx-auto">
 5 |       <header>
 6 |         <h2 class="text-center">Create an Account</h2>
 7 |       </header>
 8 |       <transition name="fade">
 9 |         <p
10 |           class="bg-red-100 p-5 my-5 border border-red-200 rounded text-red-500"
11 |           v-if="error"
12 |         >
13 |           {{ error }}
14 |         </p>
15 |       </transition>
16 |       <form @submit.prevent>
17 |         <div class="mb-4">
18 |           <label for="email" class="font-bold text-gray-700">Email</label>
19 |           <input
20 |             type="email"
21 |             placeholder="joe@bloggs.com"
22 |             v-model="email"
23 |             id="email"
24 |             class="bg-white px-4 py-2 border rounded w-full"
25 |           />
26 |         </div>
27 |         <div class="mb-4">
28 |           <label class="label">Password</label>
29 |           <input
30 |             type="password"
31 |             v-model="password"
32 |             id="password"
33 |             class="bg-white px-4 py-2 border rounded w-full"
34 |           />
35 |         </div>
36 |         <button
37 |           type="submit"
38 |           @click="signUp"
39 |           class="bg-green-500 px-4 py-2 rounded text-white border border-green-600 transition duration-500 ease-in-out hover:bg-green-600"
40 |         >
41 |           Sign-up
42 |         </button>
43 |       </form>
44 |     </article>
45 |   </section>
46 | </template>
47 | 
48 | <script>
49 | import firebase from "firebase";
50 | 
51 | export default {
52 |   data() {
53 |     return {
54 |       email: "",
55 |       password: "",
56 |       error: null,
57 |     };
58 |   },
59 |   methods: {
60 |     signUp() {
61 |       this.error = null;
62 |       firebase
63 |         .auth()
64 |         .createUserWithEmailAndPassword(this.email, this.password)
65 |         .then(() => {
66 |           const user = firebase.auth().currentUser;
67 |           const actionCodeSettings = {
68 |             url: `${process.env.VUE_APP_HOST_NAME}/sign-in/?email=${user.email}`,
69 |           };
70 |           user.sendEmailVerification(actionCodeSettings);
71 |         })
72 |         .catch(error => {
73 |           this.error = error.message;
74 |         });
75 |     },
76 |   },
77 | };
78 | </script>
79 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import firebase from "firebase";
 4 | import VueRouter from "vue-router";
 5 | import { store } from "./store/store";
 6 | import { routes } from "./router/routes";
 7 | import "@/assets/css/main.css";
 8 | 
 9 | // Firebase config - this is provided when you create your app
10 | // Swap out these settings for your project settings
11 | var firebaseConfig = {
12 |   apiKey: "AIzaSyCxfKEMCvc-rtExZTsJQKPr4mbXkmQYkJY",
13 |   authDomain: "vue-auth-demo-637b2.firebaseapp.com",
14 |   databaseURL: "https://vue-auth-demo-637b2.firebaseio.com",
15 |   projectId: "vue-auth-demo-637b2",
16 |   storageBucket: "vue-auth-demo-637b2.appspot.com",
17 |   messagingSenderId: "624803255895",
18 |   appId: "1:624803255895:web:c4f09775fe732e8f3b7512",
19 | };
20 | 
21 | // Initialize Firebase
22 | firebase.initializeApp(firebaseConfig);
23 | 
24 | // Set-up and use the Vue Router
25 | // Pass in your routes and then
26 | // Set the mode to use history
27 | // removes # from the URL
28 | Vue.use(VueRouter);
29 | 
30 | const router = new VueRouter({
31 |   routes: routes,
32 |   mode: "history",
33 | });
34 | 
35 | // Check before each page load whether the page requires authentication/
36 | // if it does check whether the user is signed into the web app or
37 | // redirect to the sign-in page to enable them to sign-in
38 | router.beforeEach((to, from, next) => {
39 |   const user = firebase.auth().currentUser;
40 |   const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
41 | 
42 |   if (requiresAuth && !user) {
43 |     next("/sign-in");
44 |   } else if (requiresAuth && user) {
45 |     next();
46 |   } else {
47 |     next();
48 |   }
49 | });
50 | 
51 | // Wrap the vue instance in a Firebase onAuthStateChanged method
52 | // This stops the execution of the navigation guard 'beforeEach'
53 | // method until the Firebase initialization ends
54 | firebase.auth().onAuthStateChanged(() => {
55 |   new Vue({
56 |     el: "#app",
57 |     store: store,
58 |     router: router,
59 |     render: h => h(App),
60 |   });
61 | });
62 | 


--------------------------------------------------------------------------------
/src/router/routes.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase";
 2 | import Home from "@/components/Home";
 3 | import SignIn from "@/components/SignIn";
 4 | import SignUp from "@/components/SignUp";
 5 | import Error404 from "@/components/Error404";
 6 | import Dashboard from "@/components/Dashboard";
 7 | import ForgotPassword from "@/components/ForgotPassword";
 8 | 
 9 | // This is where you add all your site routes
10 | // Each route is set as an object in the array
11 | // For a the most basic route just set
12 | // the path & component to load
13 | 
14 | export const routes = [
15 |   {
16 |     path: "",
17 |     name: "home",
18 |     component: Home,
19 |   },
20 |   {
21 |     path: "/sign-in",
22 |     name: "signIn",
23 |     component: SignIn,
24 |     beforeEnter(to, from, next) {
25 |       const user = firebase.auth().currentUser;
26 |       if (user) {
27 |         next({ name: "dashboard" });
28 |       } else {
29 |         next();
30 |       }
31 |     },
32 |   },
33 |   {
34 |     path: "/sign-up",
35 |     name: "signUp",
36 |     component: SignUp,
37 |     beforeEnter(to, from, next) {
38 |       const user = firebase.auth().currentUser;
39 |       if (user) {
40 |         next({ name: "dashboard" });
41 |       } else {
42 |         next();
43 |       }
44 |     },
45 |   },
46 |   {
47 |     path: "/forgot-password",
48 |     name: "forgotPassword",
49 |     component: ForgotPassword,
50 |     beforeEnter(to, from, next) {
51 |       const user = firebase.auth().currentUser;
52 |       if (user) {
53 |         next({ name: "dashboard" });
54 |       } else {
55 |         next();
56 |       }
57 |     },
58 |   },
59 |   {
60 |     path: "/dashboard",
61 |     name: "dashboard",
62 |     component: Dashboard,
63 |     meta: {
64 |       requiresAuth: true,
65 |     },
66 |   },
67 |   {
68 |     path: "/404",
69 |     name: "404",
70 |     component: Error404,
71 |   },
72 |   {
73 |     path: "*",
74 |     redirect: "/404",
75 |   },
76 | ];
77 | 


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | import firebase from "firebase";
 4 | 
 5 | Vue.use(Vuex);
 6 | 
 7 | export const store = new Vuex.Store({
 8 |   state: {
 9 |     user: null,
10 |   },
11 |   getters: {
12 |     getUser: state => state.user,
13 |   },
14 |   mutations: {
15 |     SET_USER: state => {
16 |       state.user = firebase.auth().currentUser;
17 |     },
18 |   },
19 |   actions: {
20 |     setUser: context => {
21 |       context.commit("SET_USER");
22 |     },
23 |   },
24 | });
25 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [],
3 |   theme: {
4 |     fontFamily: {
5 |       sans: ["Open Sans", "sans-serif"],
6 |     },
7 |   },
8 | };
9 | 


--------------------------------------------------------------------------------