VueJS By The @vue/cli

https://gitpitch.com/remibantos/vuejs-handson

What is VueJS ?

"Vue, pronounced /vjuː/ like view, is a progressive framework for building user interfaces.
Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries."

History

In February 2014, Evan You publish the first VueJS version)
"I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?"

Accessible

Easy learning curve.
An app can be built in a few minutes: JSFiddle - "TODO List" Sample app

Versatile

VueJS can be used for many different needs, in many different ways, you can create a small widget, a Single Page Application, components, complex apps with routing, state management, ...
You can create templates in DOM, inline templates, or package them in a .vue component.

Performant

VueJS, like other modern framework use virtual dom where the DOM can be represented as a data structure in Javascript
Good position in JS frameworks benchmarks
Links:

Lets code !

Prerequistes

npm: https://www.npmjs.com/get-npm

@vue/cli

Interactive project scaffolding via @vue/cli
Zero config rapid prototyping via @vue/cli + @vue/cli-service-global
A runtime dependency (@vue/cli-service) that is:
- Upgradeable
- Built on top of webpack, with sensible defaults
- Configurable via in-project config file
A rich collection of official plugins integrating the best tools in the frontend ecosystem
A full graphical user interface to create and manage Vue.js projects

Install vue-cli

npm install -g @vue/cli

Hello World !

vue create swapui
cd swapui

Select the default and click enter

Idea settings

What do we have here...

VueJS components

template = HTML component template

const MyDate = {
    template: '<h1>My date</h1>'
}

VueJS components

template = HTML component template
data = internal components attributes

const MyDate = {
    template: '<h1>{{date}}</h1>',
    data() {
        return {
            date: new Date()
        }
    }
}

VueJS components

template = HTML component template
data = internal components attributes
methods = components functions

const MyDate = {
    template: '<h1>{{date}}</h1> {{hello()}} {{date}}',
    data() {return {date: new Date()}},
    methods : {
        hello() {
            return 'hello world';
        }
    }
}

VueJS components

template = HTML component template
data = internal components attributes
methods = components functions
props = component parameters

const MyDate = {
    props: ['name'],
    template: '<h1>{{date}}</h1> {{hello()}} {{date}}',
        data() {return {date: new Date()}},
    methods : {
        hello() {
            return 'hello ' + ${this.name};
        }
    }
}

VueJS components

template = HTML component template
data = internal components attributes
methods = components functions
props = component parameters
components = list components dependencies

import MyDate  from './MyDate'
const MyComponent = {
    template: '<h1>Hello World <my-date/> </h1>',
    components : {MyDate}
}

Single file component (.vue)

<template>
    <div class="hello">
        {{message}}
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

Web components foundation

"The Web Components / Custom Elements spec allows you to define your own custom elements in the browser and the logic attached to them. It’s been a long time coming, but it’s almost here. The advantage of Web Components is that they are interoperable between any framework or library, or even Vanilla JS. Thanks to Vue’s small size, with the help of a plugin, you can create native custom elements from Vue components."

What about our swapui app!

npm run serve

Replace the HelloWorld.vue content with

<template>
    <div class="swapui">
        <h1>Swapui</h1>
    </div>
</template>

<script>
export default {
  name: 'Swapui'
}
</script>

<style scoped>
</style>

Rename HelloWorld.vue to Swapui.vue & replace App.vue content with

<template>
    <div class="swapui">
        <h1>Swapui</h1>
    </div>
</template>
<script>
  export default {
    name: 'Swapui'
  }
</script>
<style scoped>

</style>

Component props

Provide "A long time ago..." string from App to Swapui component and replace "Swapui" string with it

<template>
    <div class="swapui">
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
export default {
  name: 'Swapui',
  props:['msg'],
}
</script>

<style scoped>
</style>

<template>
  <div id="app">
    <swapui msg="A long time ago..."/>
  </div>
</template>

<script>
import Swapui from './components/Swapui'

export default {
  name: 'app',
  components: {
    Swapui
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Declarative rendering

Add a data attribute named date valued to current date and display it under the '<h1>...<h1>' line in a '<h2></h2>' element

Check what happens when you refresh the page

data() {
    return {
        date: new Date()
    }
}

<template>
    <div class="swapui">
        <h1>{{msg}}</h1>
        <h2>because we are {{date}}</h2>
    </div>
</template>

External lib

Import momentjs lib and format current date to a pretty one

import moment from 'moment'

data () {
    return {
      date: moment().format('LLLL'),
    }
  }

This dependency was not found:
* moment in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Swapui.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save moment

Attribute binding

Add "This is the date" title to the date h2 element that we added bound to a new data element named 'dateTitle'

<h2 v-bind:title="dateTitle">

data () {
    return {
      date: moment().format('LLLL'),
      dateTitle: 'This is the date'
    }
  }

v-bind shortcut: ":'

<h2 :title="dateTitle">

Loops

Add an array of strings data element named "characters" which contains 'Boba Fett' and 'Leia Skywalker' items

Then display these elements in a div using v-for directive

<!-- Sample -->
<div v-for="item in items"><span>{{character}}</span></div>

<!-- ... -->
<div v-for="character in characters"><span>{{character}}</span></div>
<!-- ... -->

data () {
    return {
      // ...
      characters: ['Boba Fett', 'Leia Skywalker']
      
    }
  }

ESLint compliation warning:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at src/components/Swapui.vue:5:9:
  3 |         <h1>{{msg}}</h1>
  4 |         <h2 v-bind:title="dateTitle">{{date}}</h2>
> 5 |         <div  v-for="character in characters"><span v-if="character !== 'Bobba Fett'">{{character}}</span></div>
    |         ^
  6 |     </div>
  7 | </template>

You have to provide vue with the collection elements identity property to tell Vue how to track nodes identity so existing elements can be reused and reordered

Not necessary for simple content according to VueJS doc, but ESLint stills throw a warning...

<!-- ... -->
<div :key= "character" v-for="character in characters"><span>{{character}}</span></div>
<!-- ... -->

https://vuejs.org/v2/guide/list.html#key

Conditionals

Add a condition with v-if directive in order not to display a character if named 'Boba Fett'

<!-- ... -->
<div :key= "character" v-for="character in characters"><span v-if="character !== 'Bobba Fett'">{{character}}</span></div>

Let's add some style

Thanks to @vue/cli

$ vue add vuetify
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font md
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? No
? Use babel/polyfill? Yes
? Select locale en

New template

We have selected a pre-made template usage for Vuetify

Let's revert App.vue modification

Now let's use vuetify

https://vuetifyjs.com/en/ (aka RTFM)

<template>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <swapui msg="A long time ago..."/>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>

<script>
import Swapui from './components/Swapui.vue'

export default {
  name: 'app',
  components: {
    Swapui
  }
}
</script>

<style>
</style>

<template>
    <div class="swapui">
        <h1>{{msg}}</h1>
        <h2 :title="dateTitle">because we are {{date}}</h2>
        <v-layout>
            <v-flex :key="character" v-for="character in characters">
                <v-card>
                    <v-card-title>
                        <span>{{character.name}}</span>
                    </v-card-title>
                    <v-img height="350px" :src="character.src"></v-img>
                </v-card>
            </v-flex>
        </v-layout>
    </div>
</template>
<script>

  import moment from 'moment'

  export default {
    name: 'Swapui',
    props: ['msg'],
    data() {
      return {
        date: moment().format('LLLL'),
        dateTitle: 'This is the date',
        characters: [
          {
            name: 'Boba Fett',
            src: 'http://fr.web.img3.acsta.net/r_1920_1080/newsv7/18/05/25/07/43/26079630.jpg'
          },
          {
            name: 'Jabba the Hutt',
            src: 'http://fr.web.img5.acsta.net/r_1920_1080/newsv7/18/05/25/07/43/42131530.png'
          },
          {
            name: 'Han Solo',
            src: 'https://photos.lci.fr/images/613/344/han-solo-star-wars-1b8f56-1@1x.jpeg'
          },]
      }
    }
  }
</script>
<style scoped>

</style>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PITCHME.md

PITCHME.md

VueJS By The @vue/cli

What is VueJS ?

History

Accessible

Versatile

Performant

Lets code !

Prerequistes

@vue/cli

Install vue-cli

Hello World !

Idea settings

What do we have here...

VueJS components

VueJS components

VueJS components

VueJS components

VueJS components

Single file component (.vue)

Web components foundation

What about our swapui app!

Component props

Declarative rendering

External lib

Attribute binding

Loops

Conditionals

Let's add some style

New template

Now let's use vuetify

Files

PITCHME.md

Latest commit

History

PITCHME.md

File metadata and controls

VueJS By The @vue/cli

What is VueJS ?

History

Accessible

Versatile

Performant

Lets code !

Prerequistes

@vue/cli

Install vue-cli

Hello World !

Idea settings

What do we have here...

VueJS components

VueJS components

VueJS components

VueJS components

VueJS components

Single file component (.vue)

Web components foundation

What about our swapui app!

Component props

Declarative rendering

External lib

Attribute binding

Loops

Conditionals

Let's add some style

New template

Now let's use vuetify