![data(context)
- isServer
- isClient
- isDev
- req
- res
- params
- query
- env
- route
- base
- store
- error({ statusCode, message })
- redirect([status], path, [query])](https://image.slidesharecdn.com/nuxtjs-161214153928/85/Nuxt-js-Introduction-21-320.jpg)
![nuxt.config.js
module.exports = {
plugins: [
‘plugins/vuelidate.js’
],
build: {
vendor: [‘vuelidate’]
}
}](https://image.slidesharecdn.com/nuxtjs-161214153928/85/Nuxt-js-Introduction-26-320.jpg)
![nuxt.config.js
module.exports = {
head: {
title: ‘Default title’,
meta: [
{ charset: ‘utf-8’ }
]
}
}](https://image.slidesharecdn.com/nuxtjs-161214153928/85/Nuxt-js-Introduction-29-320.jpg)
Nuxt.js - Introduction
- 2. A minimalist framework for server-rendered Vue.js applications Inspired by Next.js
- 3. Built on top of Vue.js 2
- 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
- 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>
- 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>
- 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>
- 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
- 38. server.js const Nuxt = require(‘nuxt') const nuxt = new Nuxt(options) nuxt.build() .then(() => { // nuxt.renderRoute(‘/‘) })
- 40. server.js const Nuxt = require(‘nuxt’) const app = require(‘express’)() new Nuxt(options) .then((nuxt) => { app.use(nuxt.render) app.listen(3000) })
- 42. package.json { “dependencies": { “nuxt”: "latest" }, “scripts”: { “dev”: “nuxt”, “build”: “nuxt build”, “start”: “nuxt start" } }
- 44. pages/index.vue —> /index.html pages/about.vue —> /about/index.html
- 45. nuxtjs.org Chopin brothers Made with nuxt.js