├── .github
    └── FUNDING.yml
├── .gitignore
├── README.md
├── layouts
    └── default.vue
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    └── index.vue
└── plugins
    └── firebase.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # Enables "Sponsor" button on project
2 | 
3 | github: lupas
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .nuxt


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Nuxt.js (v2), Firestore & SSR 🔥
2 | 
3 | Nuxt.js (v2) & Firestore integration with working SSR.
4 | 
5 | ## Step-by-step Guide
6 | 
7 | https://medium.com/@pascalluther/nuxt-js-v2-firestore-ssr-938d8fb7d2b0
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <nuxt />
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | const pkg = require('./package')
 2 | 
 3 | module.exports = {
 4 |   mode: 'universal',
 5 |   head: {
 6 |     title: pkg.name,
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: pkg.description }
11 |     ]
12 |   },
13 |   plugins: ['~/plugins/firebase.js']
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt2-firestore",
 3 |   "version": "1.0.0",
 4 |   "description": "My ultimate Nuxt.js project",
 5 |   "author": "Pascal",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate"
12 |   },
13 |   "dependencies": {
14 |     "core-js": "^2.6.11",
15 |     "cross-env": "^7.0.2",
16 |     "firebase": "^7.10.0",
17 |     "nuxt": "^2.11.0"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^1.11.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="container">
 3 |     <div>
 4 |       <h2>
 5 |         Write to Firestore.
 6 |       </h2>
 7 |       <div>
 8 |         <button @click="writeToFirestore" :disabled="writeSuccessful">
 9 |           <span v-if="!writeSuccessful">Write now</span>
10 |           <span v-else>Successful!</span>
11 |         </button>
12 |       </div>
13 |     </div>
14 | 
15 |     <div>
16 |       <h2>
17 |         Read from Firestore.
18 |       </h2>
19 |       <div>
20 |         <button @click="readFromFirestore" :disabled="readSuccessful">
21 |           <span v-if="!readSuccessful">Read now</span>
22 |           <span v-else>Successful!</span>
23 |         </button>
24 |         <p>{{text}}</p>
25 |       </div>
26 |     </div>
27 |   </section>
28 | </template>
29 | 
30 | <script>
31 | import { fireDb } from '~/plugins/firebase.js'
32 | export default {
33 |   data() {
34 |     return {
35 |       writeSuccessful: false,
36 |       readSuccessful: false,
37 |       text: ''
38 |     }
39 |   },
40 |   async asyncData({ app, params, error }) {
41 |     const ref = fireDb.collection('test').doc('test')
42 |     let snap
43 |     try {
44 |       snap = await ref.get()
45 |     } catch (e) {
46 |       // TODO: error handling
47 |       console.error(e)
48 |     }
49 |     return {
50 |       text: snap.data().text
51 |     }
52 |   },
53 |   methods: {
54 |     async writeToFirestore() {
55 |       const ref = fireDb.collection('test').doc('test')
56 |       const document = {
57 |         text: 'This is a test message.'
58 |       }
59 |       try {
60 |         await ref.set(document)
61 |       } catch (e) {
62 |         // TODO: error handling
63 |         console.error(e)
64 |       }
65 |       this.writeSuccessful = true
66 |     },
67 |     async readFromFirestore() {
68 |       const ref = fireDb.collection('test').doc('test')
69 |       let snap
70 |       try {
71 |         snap = await ref.get()
72 |       } catch (e) {
73 |         // TODO: error handling
74 |         console.error(e)
75 |       }
76 |       this.text = snap.data().text
77 |       this.readSuccessful = true
78 |     }
79 |   }
80 | }
81 | </script>
82 | 
83 | <style>
84 | .container {
85 |   min-height: 100vh;
86 |   display: flex;
87 |   justify-content: center;
88 |   align-items: center;
89 |   text-align: center;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/plugins/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | if (!firebase.apps.length) {
 5 |   const config = {
 6 |     apiKey: '<replace this>',
 7 |     authDomain: '<replace this>',
 8 |     databaseURL: '<replace this>',
 9 |     projectId: '<replace this>',
10 |     storageBucket: '<replace this>',
11 |     messagingSenderId: '<replace this>',
12 |     appId: '<replace this>',
13 |     measurementId: '<replace this>',
14 |     fcmPublicVapidKey: '<replace this>'
15 |   }
16 |   firebase.initializeApp(config)
17 |   firebase.firestore()
18 | }
19 | const fireDb = firebase.firestore()
20 | export { fireDb }
21 | 


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