Intro to Vue.js and Nuxt.js

πŸ––

About myself

Paul Melero

Web End Developer

Github gangsthub
Twitter @paul_melero
CodeSandBox gangsthub/sandboxes
Web graficos.net

Agriculture Eng. 🌡

Why Vue.js?

Why do we need frameworks?

We need frameworks, mainly, because:

  • They help us organize our codebase.
  • They do things cleaner and more elegantly (DOM manipulation, models syncing, validation...).
  • We have better performance.

  • They do automatic tasks for us: compiling, optimization, compression, code-splitting, tree-shaking, SSR...

The big 3

Open Source!

What is Vue.js?

It is a View focused library for building user interfacesΒ 

πŸŽ₯ Movie Time! 🍿 

Gregg Pollack (Vue Mastery) and Evan You (Creator)

Introduces Single File Components

Not mandatory API, tho

Β 

*html

*js/*ts

*(s)css

What about SC?

Virtual DOM

Not to confuse with Shadow DOM

isolated

DOM node

or custom element

Shadow

DOM

CSS

Reactive

Image from docs

Native rendering

With Vue.js (and the power of modern building tools)

  • we have really powerful applications πŸ’ͺ🏽
  • real good, real quick πŸ’ƒπŸΎ
  • that are flexible and performant πŸš€

Personal Statement

  • It super friendly with other libraries.
  • It is ergonomic,
  • easier to learn than others,
  • and to understand.
  • Has a great community.

Differences with other frameworks

Β πŸ‘¨β€πŸ‘§ πŸ‘¨β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘§ πŸ‘©β€πŸ‘¦ πŸ‘©β€πŸ‘¦β€πŸ‘¦

Some numbers πŸ“ˆΒ 

V

R

A

Some numbers πŸ“ˆΒ 

Getting Started

Simplest Vue.js example

<div id="simplest-example">
  <h1>{{ whatever }}</h1>
</div>

new Vue({
Β  el: '#simplest-example',
Β  data: {
Β  Β  whatever: 'Hello world',
Β  }
})
1
2
3
...
1

2

3

4

5

Getting Started - installation

npm install --global @vue/cli
Β 
>

Getting Started - Dev Tool!

Syntax

3.1 Getting started - Syntax

<div id="app">
  <span
    v-if="seen"
  >Now you see me</span>
</div>
new Vue({
  el: '#app',
  data: {
    seen: true // <----
  }
});

v-if

3.2 Getting started - Syntax

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {
    todos: [ // <----
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

Loops​

v-for (in)

3.3 Getting started - Syntax

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter">
new Vue({
  el: '#app',
  // data: {},
  methods: { // <----
    doThat: function(...args) { /* ... */ }
  }
})

3.4 Getting started - Forms

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
new Vue({
  el: '#app',
  data: {
    message: 'How vuetiful is that!'
  }
})

3.5 Data vs Computed Properties

<div id="app-6">
  <p>{{ message }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</div>
new Vue({
  el: '#app',
  data: {
    message: 'I\'m the original message'
  },
  





})
<p>{{ reversedMessage }}</p>
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }

Organizing Components

Global vs Local

Image from docs

Intro to Nuxt.js

Features

  • Write Vue Files (*.vue)
  • Automatic Code Splitting
  • Server-Side Rendering
  • Powerful Routing System with Asynchronous Data
  • Static File Serving
  • ES6/ES7 Transpilation
  • Bundling and minifying of your JS & CSS
  • Managing <head> element (<title>, <meta>, etc.)
  • Hot module replacement in Development
  • Pre-processor: Sass, Less, Stylus, etc.
  • HTTP/2 push headers ready
  • Extending with Modular architecture

Scaffolding πŸš€

npx create-nuxt-app project-name

>

✌🏾 Demo! ✌🏾

Vue.js Links

Thank you very much!

πŸ––πŸ’•πŸ’•πŸ’•πŸ’•πŸ––

v

Intro to Vue.js and Nuxt.js

By Paul Melero

Intro to Vue.js and Nuxt.js

The exercises that goes with the talk: https://github.com/gangsthub/vue-exercises

  • 244
Loading comments...

More from Paul Melero