Nuxt4all

Alex duval

@xlanex6

QUOI ?

Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries.

Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

FRAMEWORKS de Frameworks ?

Mais pas que !!!!

SPA en VUE

vue-cli

...
/src
/components
vue.config.js
...

SSR ?

SEO ?

Routes ?

multi Store ?

Performance ?

Scalable ?

VUE vs NUXT

...
src
   /assets
   /components
vue.config.js
...

/assets
/components
/layouts
/pages
/middleware
/plugins
/static
/store
nuxt.config.js

SCAFFOLD

SFC

.vue

VUE vs NUXT

SCAFFOLD

LAYOUT

PAGES

COMPONENT

VUE vs NUXT

...
head () {
    return {
      title: `${this.article.title}`,
      meta: [
        { hid: 'description', 
         name: 'description', 
         content: 'Ma description personnalisée' }
      ]
    }
  }
  ...

VUE-META

SPA + SEO = ?

SEO

configuration

VUE vs NUXT

3 modes

SSR

plugin SSR

configuration

UNIVERSAL

SPA

STATIC

VUE vs NUXT

CONFIG

UNIVERSAL

SPA

STATIC

.vue

.html

isServer

isClient

VUE vs NUXT

...
/pages
	/articles
		index.vue
		_slug.vue

	login.vue
	index.vue
...

OUT OF THE BOX

ROUTE

configuration

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

params, query, hash ...

CODE Splitting

VUE vs NUXT

...
/store
	user.js
	articles.js
	common.js
...

OUT OF THE BOX

STORE

VUEX + Configuration

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

1 store = 1 fichier

VUE vs NUXT

CONVENTION over CONFIGURATION

module.exports = {
  mode: 'spa',
  env: {
    BACKEND_URI: process.env.BACKEND_URI
  },
  head: {
	...
  },
  plugins: [
    '@/plugins/vuetify',
    { src: '@/plugins/localStorage.js', ssr: false },
    { src: '@/plugins/noty.js', ssr: false }
  ],

  modules: [
    '@nuxtjs/apollo',
  ],
  build: {
    transpile: ['vuetify/lib'],
    plugins: [new VuetifyLoaderPlugin()],
    loaders: {
      stylus: {
        import: ['~assets/style/variables.styl']
      }
    },
    extend(config, ctx) {}
  }
};

MODULES

EXTEND build

CONVENTION over CONFIGURATION

DEVELOPPER EXPERIENCE