Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Nuxt.js - Introduction

3 094 vues

Publié le

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

Publié dans : Internet
  • Soyez le premier à commenter

Nuxt.js - Introduction

  1. 1. A minimalist framework for server-rendered Vue.js applications Inspired by Next.js
  2. 2. Built on top of Vue.js 2
  3. 3. Server-side Rendering With Node.js
  4. 4. ES6 Transpilation With Babel
  5. 5. Code Splitting With Webpack
  6. 6. Focus on writing *.vue files
  7. 7. Example
  8. 8. npm install --save nuxt
  9. 9. package.json { “dependencies": { “nuxt”: "latest" }, “scripts”: { “dev”: “nuxt" } }
  10. 10. pages/index.vue <template> <h1>Hello {{ name }}</h1> </template> <script> export default { data () { return { name: ‘world’ } } } </script>
  11. 11. npm run dev
  12. 12. http://localhost:3000
  13. 13. <h1>Hello world</h1>
  14. 14. pages/ is the main API
  15. 15. pages/index.vue —> / pages/about.vue —> /about
  16. 16. Async Data
  17. 17. 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>
  18. 18. Server Data
  19. 19. pages/index.vue <template> <h1>Hi from {{ name }}</h1> </template> <script> export default { data ({ req }) { return { name: (req ? ‘server' : ‘client' } } } } </script>
  20. 20. data(context) - isServer - isClient - isDev - req - res - params - query - env - route - base - store - error({ statusCode, message }) - redirect([status], path, [query])
  21. 21. pages/auth.vue <template> <h1>Authenticated</h1> </template> <script> export default { data ({ store, redirect }) { if (store.user.authUser) return redirect(‘/login’) return {} } } </script>
  22. 22. Customisable nuxt.config.js
  23. 23. Custom Routes Ex: pages/users/_id.vue -> /users/:id
  24. 24. Vue plugins Ex: vuelidate, vue-i18n, etc.
  25. 25. nuxt.config.js module.exports = { plugins: [ ‘plugins/vuelidate.js’ ], build: { vendor: [‘vuelidate’] } }
  26. 26. plugins/vuelidate.js import Vue from 'vue' import Validation from 'vuelidate' Vue.use(Validation)
  27. 27. Head elements title, meta tags, etc.
  28. 28. nuxt.config.js module.exports = { head: { title: ‘Default title’, meta: [ { charset: ‘utf-8’ } ] } }
  29. 29. pages/index.vue <template> <h1>Hello world</h1> </template> <script> export default { head: { title: ‘Index page' } } </script>
  30. 30. Vuex Store With store/index.js
  31. 31. router/index.js import Vuex from 'vuex' const store = new Vuex.Store({ state: { counter: 0 }, mutations: { increment (state) { state.counter++ } } }) export default store
  32. 32. pages/index.vue <template> <button @click=“$store.commit(‘increment’)"> {{ $store.state.counter }} </button> </template>
  33. 33. Layouts layouts/app.vue
  34. 34. layouts/app.vue <template> <nuxt-container> <p>My nav bar here!</p> <nuxt></nuxt> </nuxt-container> </template> <style src=“~assets/main.css”></style>
  35. 35. Etc. - Routes Transitions - Static files - Error page - Testing - Environment variables - postcss plugins - babel configuration - webpack config
  36. 36. Use it Programmatically
  37. 37. server.js const Nuxt = require(‘nuxt') const nuxt = new Nuxt(options) nuxt.build() .then(() => { // nuxt.renderRoute(‘/‘) })
  38. 38. Express Middleware app.use(nuxt.render)
  39. 39. server.js const Nuxt = require(‘nuxt’) const app = require(‘express’)() new Nuxt(options) .then((nuxt) => { app.use(nuxt.render) app.listen(3000) })
  40. 40. Server Deployment
  41. 41. package.json { “dependencies": { “nuxt”: "latest" }, “scripts”: { “dev”: “nuxt”, “build”: “nuxt build”, “start”: “nuxt start" } }
  42. 42. Serverless Deployment nuxt generate
  43. 43. pages/index.vue —> /index.html pages/about.vue —> /about/index.html
  44. 44. nuxtjs.org Chopin brothers Made with nuxt.js

×