Nuxt.js
Desenvolvendo Aplicações SSR com Vue
Lucas Macedo
@luuckymacedo
github.com/lucassmacedo
Back-End Developer
ADS Unicesumar
A minimalist framework for server-rendered Vue.js applications
Inspired by Next.js
https://twitter.com/Atinux
https://github.com/Atinux
With Node.js
With Babel
With Webpack
Install with vue-cli
# instala o vue-cli globalmente
npm install -g vue-cli
# Template NUXT "nuxt-community/starter-template"
vue init nuxt-community/starter-template femug-mga-nuxt
? Project name (femug-mga-nuxt)
? Project description (Nuxt.js project)
? Author (Lucas Macedo <luuckymacedo@gmail.com>)
vue-cli · Generated "femug-mga-nuxt".
To get started:
cd femug-mga-nuxt
npm install # Or yarn
npm run dev
Install manually
npm install --save nuxt
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
# layouts/default.vue
<template>
<div>
<nuxt/>
</div>
</template>
# layouts/blog.vue
<template>
<div>
<header/>
<nuxt/>
<footer/>
</div>
</template>
pages/index.vue -> /
pages/user.vue -> /user
pages/blog.vue -> /blog
pages/contact.vue -> /contact
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
# middleware/auth.js
export default function ({ redirect }) {
// If the user is not authenticated
if (!sessionStorage.getItem("userToken")) {
return redirect('/login')
}
}
// pages/secret.vue
export default {
...
middleware: 'auth',
}
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
asyncData ({ params }, callback) {
axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
callback(null, { title: res.data.title })
})
}
}
</script>
@luuckymacedo
@vuejs
vuejs.org
vuejs.org/guide
vuejs.org/api
github.com/vuejs/awesome-vue
github.com/vuejs/vuex
github.com/vuejs/vue-router
forum.vuejs.org
gitter.im/vuejs/vue
vuejobs.com
vueslack.com