Nuxt.js is a minimal framework for creating Vue.js applications with focus on UI rendering and abstracting away client/server distribution. It offers static site generation of Vue.js apps, a single page application mode and Server Side Rendering in combination with a backend like Google Firebase's cloud functions.

3. ●
●
●

4. ●
●
●
●
●

5. ●
●
●
●

6. ~$ mkdir vue-vienna
~$ cd vue-vienna
~/vue-vienna$ vue init nuxt-community/starter-template src
~/vue-vienna$ cd src
~/vue-vienna/src$ yarn
~/vue-vienna/src$ yarn add axios

8. pages/
--| about/
----|index.vue
--| index.vue
router: {
routes: [{
name: 'about',
path: '/about',
component: 'pages/about/index.vue'
}, {
name: 'index',
path: '/',
component: 'pages/index.vue'
}
]
}

9. pages/
--| users/
----|_id.vue
--| _slug/
----|index.vue
router: {
routes: [{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
}, {
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
}
]
}

10. ~/vue-vienna/src$ yarn generate

11. ~/vue-vienna/src$ yarn build --spa

12. ~/vue-vienna$ firebase init
o Functions
o Hosting
.
.
.
~/vue-vienna$ cd functions
~/vue-vienna/functions$ yarn
~/vue-vienna/functions$ yarn add express nuxt axios

13. ...
buildDir: '../functions/nuxt',
build: {
publicPath: '/assets/',
vendor: ['axios'],
extractCSS: true,
...
config.module.rules.push({
enforce: 'pre',
test: /.(js|vue)$/,
loader: 'eslint-loader',
exclude: [
/(node_modules)/,
/(functions)/
]
})
...
}

14. {
"hosting": {
"public": "functions/nuxt/dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"function": "app"
}]
},
"functions": {
"source": "functions"
}
}

16. ~/vue-vienna$ cd src && yarn build
~/vue-vienna/src$ cd ..
~/vue-vienna$ firebase serve --only hosting,functions

17. ~/vue-vienna$ firebase deploy