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