Functional starter code

Author: aeksco

Diff for: README.md

@@ -27,3 +27,7 @@ yarn run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+### Built with
+[vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda)
+[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)

Diff for: lambda/hello.js

@@ -0,0 +1,4 @@
+[build]
+  command = "yarn build"
+  functions = "lambda"
+  publish = "dist"

Diff for: netlify.toml

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.6.6"
+    "axios": "^0.18.0",
+    "vue": "^2.6.6",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.0",
@@ -17,6 +20,8 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "prerender-spa-plugin": "^3.4.0",
+    "vue-cli-plugin-netlify-lambda": "^0.1.1",
     "vue-template-compiler": "^2.5.21"
   },
   "eslintConfig": {

Diff for: package.json

@@ -1,21 +1,13 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view/>
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'app',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

Diff for: src/App.vue

@@ -0,0 +1,7 @@
+export function handler(event, context, callback) {
+  console.log(event)
+  callback(null, {
+    statusCode: 200,
+    body: JSON.stringify({ msg: "Hello from Netlify Lambda!" })
+  })
+}

Diff for: src/lambda/hello.js

@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import store from './store'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  router,
+  store,
+  render: h => h(App)
 }).$mount('#app')

Diff for: src/main.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (about.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+    }
+  ],
+  mode: 'history'
+})

Diff for: src/router.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    msg: '',
+    loading: false
+  },
+  mutations: {
+    msg (state, msg) { state.msg = msg },
+    loading (state, loading) { state.loading = loading }
+  },
+  actions: {
+    fetchMessage ({ commit }) {
+      commit('loading', true)
+      axios.get('/.netlify/functions/hello')
+      .then(({ data }) => {
+        // Adds a 1 second delay to illustrate asyc behavior
+        // setTimeout can/should be removed
+        setTimeout(() => {
+          commit('msg', data.msg)
+          commit('loading', false)
+        }, 1000)
+      })
+      .catch(() => {
+        commit('loading', false)
+      })
+    }
+  }
+})

Diff for: src/store.js

@@ -0,0 +1,6 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+    <h4>This page will be rendered statically after running <code>yarn build</code></h4>
+  </div>
+</template>

Diff for: src/views/About.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+
+    <p>The following message was fetched from the <code>hello</code> lambda function located in <code>/src/lambda/hello.js</code></p>
+
+    <hr>
+
+    <pre v-if="loading">LOADING...</pre>
+    <pre v-else>{{msg}}</pre>
+
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'home',
+  components: {
+    HelloWorld
+  },
+  mounted () {
+    this.$store.dispatch('fetchMessage')
+  },
+  computed: {
+    msg () {
+      return this.$store.state.msg
+    },
+    loading () {
+      return this.$store.state.loading
+    }
+  }
+}
+</script>

Diff for: src/views/Home.vue

@@ -0,0 +1,16 @@
+const path = require('path');
+const PrerenderSPAPlugin = require('prerender-spa-plugin');
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      new PrerenderSPAPlugin({
+        staticDir: path.join(__dirname, 'dist'),
+        routes: [
+          '/',
+          '/about',
+        ],
+      }),
+    ],
+  },
+};