Merge pull request #313 from stursby/master

Add Firebase example

examples/with-firebase/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.nuxt

examples/with-firebase/README.md

@@ -0,0 +1,31 @@
+# nuxt-firebase
+
+> Nuxt.js with Firebase (REST API)
+
+[DEMO](https://nuxt-firebase.now.sh/)
+
+## About
+
+This project uses [Firebase](https://firebase.google.com/). The tools and infrastructure you need to build better apps and grow successful businesses.
+
+You can view the Firebase data at [https://nuxt-firebase.firebaseio.com/.json](https://nuxt-firebase.firebaseio.com/.json). This is what the App will consume.
+
+## Getting Started
+
+Download this example [or clone the repo](https://github.com/nuxt/nuxt.js):
+
+```bash
+curl https://codeload.github.com/nuxt/nuxt.js/tar.gz/master | tar -xz --strip=2 nuxt.js-master/examples/with-firebase
+cd with-firebase
+```
+
+Install and run:
+
+```bash
+npm install
+npm run dev
+
+# or with Yarn
+yarn
+yarn dev
+```

examples/with-firebase/layouts/default.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="container">
+    <div class="header">
+      <nav>
+        <h1 @click="$router.push('/')">Nuxt.js + Firebase</h1>
+      </nav>
+    </div>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+
+body {
+  padding-top: 1.5rem;
+}
+
+nav {
+  padding: 1.5rem 0;
+}
+
+h1 {
+  cursor: pointer;
+  display: inline-block;
+}
+
+</style>

examples/with-firebase/nuxt.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  head: {
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    ],
+    link: [
+      { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' }
+    ]
+  },
+  build: {
+    vendor: ['axios']
+  }
+}

examples/with-firebase/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "nuxt-firebase",
+  "version": "1.0.0",
+  "description": "Nuxt.js with Firebase",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "keywords": [
+    "nuxt",
+    "firebase"
+  ],
+  "author": "Charlie Hield",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.15.3",
+    "nuxt": "^0.9.9"
+  }
+}

examples/with-firebase/pages/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th>Avatar</th>
+          <th>Name</th>
+          <th>Title</th>
+          <th>Profile</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(user, key) in users">
+          <td>
+            <nuxt-link :to="{ path: `/users/${key}`}">
+              <img :src="user.avatar" class="rounded" alt="avatar">
+            </nuxt-link>
+          </td>
+          <td>{{ user.name }}</td>
+          <td>{{ user.title }}</td>
+          <td>
+            <nuxt-link :to="{ path: `/users/${key}`}">View profile &rarr;</nuxt-link>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import axios from '~plugins/axios'
+
+export default {
+  async data() {
+    const { data } = await axios.get('users.json')
+    return {
+      users: data
+    }
+  }
+}
+</script>

examples/with-firebase/pages/users/_key.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="card" style="width: 20rem;">
+    <div class="card-block">
+      <img :src="user.avatar" class="rounded" alt="avatar"> <br><br>
+      <h4 class="card-title">{{ user.name }}</h4>
+      <h6 class="card-subtitle mb-2 text-muted">{{ user.title }}</h6>
+      <p class="card-text">{{ user.description }}</p>
+      <a href="#" class="btn btn-primary">Hire {{ user.name.split(' ')[0] }}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '~plugins/axios'
+
+export default {
+  async data({ route }) {
+    const { key } = route.params
+    const { data } = await axios.get(`users/${key}.json`)
+    return {
+      user: data
+    }
+  }
+}
+</script>

examples/with-firebase/plugins/axios.js

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export default axios.create({
+  baseURL: 'https://nuxt-firebase.firebaseio.com'
+})