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 ﬁles
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

Using a starter template
vue init nuxt/starter <project-name>

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>

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):

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>

<html {{ HTML_ATTRS }}> 

<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

• 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
• Deﬁne 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 })
})
}
}

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 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

Install via npm:
npm install --save axios
use it directly in our pages:
import axios from 'axios'
use build.vendor key in our nuxt.conﬁg.js:
build: { vendor: ['axios'] }
External packages

Setup the plugin before launching the app.
Vue Plugins

plugins/vue-notiﬁcations.js
import Vue from 'vue'
import VueNotifications from 'vue-notifications'
nuxt.conﬁg.js:
module.exports = {
plugins: ['~plugins/vue-notifications']
}

Nuxt.JS Introdruction

In this document

More Related Content

What's hot

Similar to Nuxt.JS Introdruction

Recently uploaded

Nuxt.JS Introdruction