Nuxt.js

Desenvolvendo Aplicações SSR com Vue

Lucas Macedo

@luuckymacedo

github.com/lucassmacedo

Back-End Developer

 

ADS Unicesumar

O QUE É?


A minimalist framework for server-rendered Vue.js applications


Inspired by Next.js

Sébastien Chopin

Core Vue.JS

https://twitter.com/Atinux

https://github.com/Atinux

 

Built on top of

Vue.js 2

Server-side Rendering

With Node.js

ES6/ES7 Transpilation

With Babel

Code Splitting

With Webpack

Focus on writing *.vue files

Installation

 

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

Directory Structure

  • Assets
  • Components
  • Layouts
  • Middleware
  • Pages
  • Plugins
  • Store
  • nuxt.config.js

The Layouts Directory

# layouts/default.vue
<template>
  <div>
    <nuxt/>
  </div>
</template>
# layouts/blog.vue
<template>
  <div>
     <header/>
        <nuxt/>
    <footer/>
  </div>
</template>

The Pages Directory

pages/index.vue     -> /
pages/user.vue      -> /user
pages/blog.vue      -> /blog
pages/contact.vue   -> /contact
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

The Middleware Directory

# 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',
}

The Pages Directory

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

Thanks !

@luuckymacedo

Links

@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

Nuxt.JS - Desenvolvendo Aplicações SSR com Vue

By Lucas Macedo

Made with Slides.com

Nuxt.JS - Desenvolvendo Aplicações SSR com Vue

FEMUG-MGA #7 - Saura Consultoria https://www.meetup.com/femugmga/events/242830383/ https://vuejs.org https://vuejs.org/guide https://vuejs.org/api https://github.com/vuejs/awesome-vue https://forum.vuejs.org https://medium.com/the-vue-point https://vuejobs.com https://conf.vuejs.org

  • 920

More from Lucas Macedo