Slides presented at the Vue.js meetup in Paris the 3rd of December 2016. Nuxt.js is a minimalist framework for server-rendered Vue.js applications. https://nuxtjs.org

2. A minimalist framework
for server-rendered Vue.js applications
Inspired by Next.js

3. Built on top of Vue.js 2

4. Server-side Rendering
With Node.js

5. ES6 Transpilation
With Babel

6. Code Splitting
With Webpack

7. Focus on writing
*.vue files

8. Example

9. npm install --save nuxt

10. package.json
{
“dependencies": {
“nuxt”: "latest"
},
“scripts”: {
“dev”: “nuxt"
}
}

11. pages/index.vue
<template>
<h1>Hello {{ name }}</h1>
</template>
<script>
export default {
data () {
return { name: ‘world’ }
}
}
</script>

12. npm run dev

13. http://localhost:3000

14. <h1>Hello world</h1>

15. pages/ is the main API

16. pages/index.vue —> /
pages/about.vue —> /about

17. Async Data

18. pages/index.vue
<template>
<ul>
<li v-for=“post in posts”>
{{ post.title }}
</li>
</ul>
</template>
<script>
import axios from 'axios'
export default {
data () {
return axios.get(‘https://my-api')
.then((res) => {
return { posts: res.data }
})
}
}
</script>

19. Server Data

20. pages/index.vue
<template>
<h1>Hi from {{ name }}</h1>
</template>
<script>
export default {
data ({ req }) {
return {
name: (req ? ‘server' : ‘client' }
}
}
}
</script>

21. data(context)
- isServer
- isClient
- isDev
- req
- res
- params
- query
- env
- route
- base
- store
- error({ statusCode, message })
- redirect([status], path, [query])

22. pages/auth.vue
<template>
<h1>Authenticated</h1>
</template>
<script>
export default {
data ({ store, redirect }) {
if (store.user.authUser)
return redirect(‘/login’)
return {}
}
}
</script>

23. Customisable
nuxt.config.js

24. Custom Routes
Ex: pages/users/_id.vue -> /users/:id

25. Vue plugins
Ex: vuelidate, vue-i18n, etc.

26. nuxt.config.js
module.exports = {
plugins: [
‘plugins/vuelidate.js’
],
build: {
vendor: [‘vuelidate’]
}
}

27. plugins/vuelidate.js
import Vue from 'vue'
import Validation from 'vuelidate'
Vue.use(Validation)

28. Head elements
title, meta tags, etc.

29. nuxt.config.js
module.exports = {
head: {
title: ‘Default title’,
meta: [
{ charset: ‘utf-8’ }
]
}
}

30. pages/index.vue
<template>
<h1>Hello world</h1>
</template>
<script>
export default {
head: {
title: ‘Index page'
}
}
</script>

31. Vuex Store
With store/index.js

32. router/index.js
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment (state) {
state.counter++
}
}
})
export default store

33. pages/index.vue
<template>
<button @click=“$store.commit(‘increment’)">
{{ $store.state.counter }}
</button>
</template>

34. Layouts
layouts/app.vue

35. layouts/app.vue
<template>
<nuxt-container>
<p>My nav bar here!</p>
<nuxt></nuxt>
</nuxt-container>
</template>
<style src=“~assets/main.css”></style>

36. Etc.
- Routes Transitions
- Static files
- Error page
- Testing
- Environment variables
- postcss plugins
- babel configuration
- webpack config

37. Use it
Programmatically

38. server.js
const Nuxt = require(‘nuxt')
const nuxt = new Nuxt(options)
nuxt.build()
.then(() => {
// nuxt.renderRoute(‘/‘)
})

39. Express Middleware
app.use(nuxt.render)

40. server.js
const Nuxt = require(‘nuxt’)
const app = require(‘express’)()
new Nuxt(options)
.then((nuxt) => {
app.use(nuxt.render)
app.listen(3000)
})

41. Server Deployment

42. package.json
{
“dependencies": {
“nuxt”: "latest"
},
“scripts”: {
“dev”: “nuxt”,
“build”: “nuxt build”,
“start”: “nuxt start"
}
}

43. Serverless Deployment
nuxt generate

44. pages/index.vue —> /index.html
pages/about.vue —> /about/index.html

45. nuxtjs.org
Chopin brothers
Made with nuxt.js