├── .editorconfig ├── .gitignore ├── README.md ├── assets ├── README.md └── css │ └── tailwind.css ├── components ├── Header.vue ├── Logo.vue └── README.md ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md ├── index.vue └── signin.vue ├── plugins ├── README.md ├── fireauth.js └── firebase.js ├── static ├── README.md └── favicon.ico ├── store ├── README.md └── index.js └── tailwind.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxt-firebase-vuex-tutorial 2 | 3 | > Setting up user accounts with nuxt, vuex, and firebase 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm run start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | /* purgecss start ignore */ 2 | @import 'tailwindcss/base'; 3 | @import 'tailwindcss/components'; 4 | /* purgecss end ignore */ 5 | @import 'tailwindcss/utilities'; 6 | -------------------------------------------------------------------------------- /components/Header.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 20 | 35 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | 20 | 22 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | mode: 'spa', 4 | /* 5 | ** Headers of the page 6 | */ 7 | head: { 8 | title: process.env.npm_package_name || '', 9 | meta: [ 10 | { charset: 'utf-8' }, 11 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 12 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 13 | ], 14 | link: [ 15 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 16 | ] 17 | }, 18 | /* 19 | ** Customize the progress-bar color 20 | */ 21 | loading: { color: '#fff' }, 22 | /* 23 | ** Global CSS 24 | */ 25 | css: [ 26 | ], 27 | /* 28 | ** Plugins to load before mounting the App 29 | */ 30 | plugins: [ 31 | '~/plugins/firebase.js', 32 | '~/plugins/fireauth.js' 33 | ], 34 | /* 35 | ** Nuxt.js dev-modules 36 | */ 37 | buildModules: [ 38 | '@nuxtjs/tailwindcss', 39 | ], 40 | /* 41 | ** Nuxt.js modules 42 | */ 43 | modules: [ 44 | ], 45 | /* 46 | ** Build configuration 47 | */ 48 | build: { 49 | /* 50 | ** You can extend webpack config here 51 | */ 52 | extend(config, ctx) { 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-firebase-vuex-tutorial", 3 | "version": "1.0.0", 4 | "description": "Setting up user accounts with nuxt, vuex, and firebase", 5 | "author": "Drew", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "firebase": "^7.9.1", 15 | "nuxt": "^2.0.0" 16 | }, 17 | "devDependencies": { 18 | "@nuxtjs/tailwindcss": "^1.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 55 | -------------------------------------------------------------------------------- /pages/signin.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/fireauth.js: -------------------------------------------------------------------------------- 1 | import { auth } from '~/plugins/firebase.js' 2 | 3 | export default (context) => { 4 | const { store } = context 5 | 6 | return new Promise((resolve, reject) => { 7 | auth.onAuthStateChanged(user => { 8 | 9 | // here is you would want to build your user 10 | // object, but for now we'll just take everything 11 | 12 | store.commit('setUser', user) 13 | resolve() 14 | }) 15 | }) 16 | } -------------------------------------------------------------------------------- /plugins/firebase.js: -------------------------------------------------------------------------------- 1 | 2 | import * as firebase from 'firebase/app' 3 | import 'firebase/auth' 4 | 5 | // Your web app's Firebase configuration 6 | var firebaseConfig = { 7 | apiKey: "AIzaSyD04iDTlyjqsOsaEgZKdo5N9tDA4DAE7XU", 8 | authDomain: "nuxt-firebase-vuex-tutorial.firebaseapp.com", 9 | databaseURL: "https://nuxt-firebase-vuex-tutorial.firebaseio.com", 10 | projectId: "nuxt-firebase-vuex-tutorial", 11 | storageBucket: "nuxt-firebase-vuex-tutorial.appspot.com", 12 | messagingSenderId: "695442144765", 13 | appId: "1:695442144765:web:4794ccc8a32a7e94762d94" 14 | }; 15 | // Initialize Firebase 16 | !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : '' 17 | 18 | export const auth = firebase.auth() 19 | export default firebase 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewclem/nuxt-vuex-firebase-tutorial/454eb24a887ff78f2506583774e329061f2f2e73/static/favicon.ico -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex' 2 | import { auth } from '~/plugins/firebase.js' 3 | 4 | const createStore = () => { 5 | return new Vuex.Store({ 6 | state: { 7 | user: '', 8 | }, 9 | 10 | getters: { 11 | user(state) { 12 | return state.user 13 | }, 14 | 15 | isAuthenticated(state) { 16 | return !!state.user 17 | } 18 | }, 19 | 20 | mutations: { 21 | setUser(state, payload) { 22 | state.user = payload 23 | } 24 | }, 25 | 26 | actions: { 27 | signUp({ commit }, { email, password }) { 28 | return auth.createUserWithEmailAndPassword(email, password) 29 | }, 30 | 31 | signInWithEmail({ commit }, { email, password }) { 32 | return auth.signInWithEmailAndPassword(email, password) 33 | }, 34 | 35 | signOut() { 36 | return auth.signOut() 37 | } 38 | } 39 | }) 40 | } 41 | 42 | export default createStore 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | ** TailwindCSS Configuration File 3 | ** 4 | ** Docs: https://tailwindcss.com/docs/configuration 5 | ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js 6 | */ 7 | module.exports = { 8 | theme: {}, 9 | variants: {}, 10 | plugins: [] 11 | } 12 | --------------------------------------------------------------------------------