Nuxt.JS Introdruction
26. May 2017•0 gefällt mir•2,120 Aufrufe
4 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Downloaden Sie, um offline zu lesen
Melden
Internet
Introduction into a minimalist framework for building universal server side rendered applications.
David LičenFolgen
Nuxt.JS Introdruction
- A minimalist framework for creating universal server side rendered (SSR) applications
- David Ličen, Freelance Front-End Developer Twitter: @davision Blog: davidlicen.com
- v1.0.0-alpha1 On May 21st 2017:
- Highlights • Shares an idea from the Next.js • Similar to Ember tries to pack essential set of tools • UI rendering as main scope (abstracting away the client/server distribution)
- How it works? Focus on writing *.vue files Code Splitting with Webpack ES6/ES7 transpilation
- What’s in the box? • Vue 2 • Vue-Router • Vuex (included only when using the store option) • Vue-Meta A total of only 28kb min+gzip (31kb with Vuex)
- Features • Automatic Code Splitting • Server-Side Rendering • Powerful Routing System with Asynchronous Data • Static File Serving • Bundling and minifying of your JS & CSS • Managing Head Elements • Hot reloading in Development • Error handling (404 pages)
- We’re gonna cover: • Set-up • Routing • Views • Async Data • Deployment • Assets • Plugins • etc
- Let’s roll!
- Using a starter template vue init nuxt/starter <project-name>
- npm run dev
- http://localhost:3000
- Barefoot npm install --save nuxt
- package.json { "dependencies": { "nuxt": "latest" }, "scripts": { "dev": "nuxt", "build": "nuxt build" "start": "nuxt start" "generate": "nuxt start" } }
- pages/index.vue <template> <h1>Hello {{ name }}!</h1> </template> <script> export default { data () { return { name: 'Vuers' } } } </script>
- npm run dev
- http://localhost:3000
- Result: <h1>Hello Vuers!</h1>
- Routing
- pages/ is the main API
- Nuxt.js automatically generates the vue-router configuration according to your file tree of *.vue files inside the /pages directory
- pages/ --| index.vue ⟶ / --| about.vue ⟶ /about --| contact.vue ⟶ /contact
- { "routes": [{ "name": "index", "path": "/", "component": "pages/index.vue" }, { "name": "about", "path": "/", "component": "pages/about.vue" }, { "name": "contact", "path": "/", "component": "pages/contact.vue" }] }
- Links <nuxt-link to="/about">About</nuxt-link> <nuxt-link to="/contact">Contact</nuxt-link>
- Dynamic Routes define a .vue file OR a directory prefixed by an _ underscore.
- pages/ --| users/ -----| _id.vue Dynamic Routes
- { "routes": [{ "name": "users-id", "path": "/users/:id?", "component": "pages/users/_id.vue" }] }
- https://nuxtjs.org/guide/routing Many more about routing (& page transitions):
- Views
- The default template (app.html) <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>
- Customize Conditional classes for IE <!DOCTYPE html> <!--[if IE 9]><html lang="en-US" class=“lt-ie9 ie9” {{ HTML_ATTRS }}><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}> <!--<![endif]--> <head> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>
- layouts/default.vue <template> <nuxt/> </template>
- layouts/default.vue <template> <div> <div id="skip"> <a href="#main-menu" class=“visually-hidden skip-link"> Skip to main navigation </a> </div> <nuxt/> </div> </template>
- pages/index.vue <template></template> <script> export default { data () { return { title: 'Hello World!' } }, head () { return { title: this.title, meta: [{ name: 'description', content: 'My description' }] } }, fetch () { ... }, } </script>
- • asyncData • fetch • head • layout • transition • scrollToTop • validate • middleware Other attributes
- Async Data
- • Nuxt.js adds an asyncData() method to let you handle async operations before setting the component data. • The result from asyncData will be merged with data. Async Data
- • Returning a Promise. • Using the async/await proposal • Define a callback as second argument Different ways to use asyncData
- Returning a Promise export default { asyncData ({ params }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } }) } }
- Using async/await export default { async asyncData ({ params }) { let { data } = await axios.get(`https://my-api/posts/${params.id}`) return { title: data.title } } }
- Using a callback export default { asyncData ({ params }, callback) { axios.get(`https://my-api/posts/${params.id}`) .then((res) => { callback(null, { title: res.data.title }) }) } }
- Deployment
- npm run build npm run start Server Deployment
- npm run generate Serverless Deployment
- .nuxt pages/ --| index.vue ⟶ /index.html --| about.vue ⟶ /about/index.html --| contact.vue ⟶ /contact/index.html
- Assets
- /assets folder is automatically processed and resolved as module dependencies. url('~assets/image.png') becomes: require('~assets/image.png') Served Assets
- <template> <img src="~assets/image.png"> </template> is complied to: createElement('img', { attrs: { src: require('~assets/image.png') }}) Served Assets
- Files from /static is automatically served and accessible in your project root URL <img src="/my-image.png"/> Static Assets
- Plugins
- Install via npm: npm install --save axios use it directly in our pages: import axios from 'axios' use build.vendor key in our nuxt.config.js: build: { vendor: ['axios'] } External packages
- Setup the plugin before launching the app. Vue Plugins
- plugins/vue-notifications.js import Vue from 'vue' import VueNotifications from 'vue-notifications' nuxt.config.js: module.exports = { plugins: ['~plugins/vue-notifications'] }
- nuxtjs.org
- Thank you!
- Any ?