Vue.js & Nuxt.js

A reactive JS-Framework plus Server Side Rendering

Mirko Lemme, @mileonnet

What is Vue.js?

Vue is a Web-Framework that is as if you rewrote AngularJS 1, kept the good parts and integrated what we learned from React. I think of it as sort of a lovechild between AngularJS 1 and React.

MVC

Setting up Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

html

javascript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

html

<div id="app">
  <p>{{ message }}</p>
</div>

...or in an
ES6- / WebPack-Context

Concepts & Features

  • Reactiveness
  • Virtual Dom
  • Unidirectional Dataflow
  • Vanilla HTML, CSS, JS
  • Vue Single File Components
  • Easy to learn / adopt
  • Great Docs! (vuejs.org)
  • It scales pretty good

What is Nuxt.js?

Nuxt.js is a framework for creating Universal Vue.js Applications. It presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.

Setting up Nuxt.js

vue init nuxt-community/starter-template <project-name>

bash

npm install --save nuxt

bash

Concepts & Features

  • Server Side Rendering
  • Static Site Generator
  • Routing via folder structure
  • Declarative configuration
  • Bundling of Vue-Plugins
  • Extension of Vue-Components

Where I had
Nuxt-trouble

Routing with dynamic nested views

3rd Party Scripts / Plugins

Documentation

Conclusion

Nuxt.js

=

Angular 1 + React + SSR

=

💚

Further reading

  • vuejs.org, nuxtjs.org
  • https://github.com/vuejs-templates
  • https://github.com/nuxt-community/awesome-nuxt
  • What Good Things Does Vue Take from React and Angular? https://bit.ly/2LCIjXb
  • Why we choose Vue.js over React for Vue Storefront https://bit.ly/2LDY540
  • What's the big deal with next.js and nuxt.js? https://bit.ly/2NLDcBj

Thank you!

slides.com/mileonnet/ww_ruhr_vue_and_nuxt_180726

Mirko Lemme, @mileonnet

ww_ruhr_vue_and_nuxt_180726

By mileonnet

ww_ruhr_vue_and_nuxt_180726

  • 591