Reference Guide - Vue & Nuxt

This document helps you to refresh your Vue skills and can also be used for quick look-ups. This reference guide was written with love and broken english, for myself, by myself as notes for myself, educational purposes and just for for fun.

(This document is not fully finished still work in progress)

Written by Martin Czerwinski ®CMQ Nordic AB | Feb 2021

TABLE OF CONTENT

VUE.JS
Bascis ◦ Vue vs. React vs. Angular
Create a Vue project ◦ Cdn ◦ Npm ◦ Vue CLI ◦ Nuxt ◦ Vito
UI frameworks ◦ Common issues ◦ Create first app - template
Directives
Attributes -> data ◦ props ◦ emits ◦ provide/inject ◦ computed ◦ methods ◦ watch ◦ life-cycle hooks
Vuex store ◦ Project structure
Functionality -> this and $refs ◦ Events and modifiers ◦ Components ◦ Dynamic components (slots) ◦ Binding Class or Style
Global parameters ◦ Composition API ◦ Minimalistic production code ◦ Error handling
Linting and formatting
NUXT
Get started ◦ Structure of Nuxt projects ◦ Basics ◦ Routes
UI FRAMEWORKS
Vuetify ◦ Mbd bootstrap 5 vs Vue-Bootstrap ◦ Mbd bootstrap 5

Really good articles to read, understand and apply in daily work:

1. Vue.js

First some basics...

ECMAScript 7 is also known as ES7, ECMAScript 2016 or JavaScript 7. Not all browsers may support all ES7 syntax but we still can use the latest version of javascript in our projects as webpack usning babel that transform latest ECMA code into older javascript syntax.

Vue uses HTML-based template syntax that in background bounds to virtual DOM. Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations to present the changes in the broser UI.

We can use vue in two diffrent ways. by apply Vue code to our HTML code marked with id. We can target only parts of our HTML pages (kind of "vue-widgets" within existing HTML) or bind Vue to control whole HTML site (commonly as single page application). When controlling whole web page we use a building project and Vue CLI helps us to set up such a projects. Then the code we write is not the code that is run in browser. The code is compiled and bundled by webpack that is build in the projects created bu Vue CLI. The project structure is then set up and templates of main app and components are set up in .vue files.

ES6/7 syntax is applied as babel and webpack transforms the code to older js syntax when building the app. data: function() {...} can be written as data() {...})

Read more:
Learn basics of Vue 3 --> here
HTML DOM events ---> here
Vue 3 API --> here
Modifiers in Vue 3 ---> here
Event handling in Vue 3 ---> here


`{{ <data> }}`	Text interpolation. Adds property value from vue instance.	`<p>Name is {{name}}</p>`
`v-html="<data>"`	Adds value as HTML between HTML tags.	`<div v-html="some-html"></div>`
`v-bind:attribute="<data>"` or `:attribute="<data>"`	One way binding. Binds vue instance property to HTML attribute.	`<img v-bind:src="imageUrl">` or `<img :src="imageUrl">`
`v-model="<data>"`	Two way binding. Binds vue script property to HTML field. By default sync data after "input" (for each char) but with lazy use "change". When using with custom components then custom component must implement prop `:modelValue` and emit `@update:modelValue` but this can be customized. Read more here. Also in vue 3 we can to other parameters, read more here.	`<input v-model="name" />` v-model.lazy v-model.number/trim/
`v-on:<event>="fnc()"` or `@<event>="fnc()"`	Handle event with correcponding Vue method Note! Pure @click="handleEvent" (method name without params) will trig method handleEvent(event) where event.target is the calling elem. If params are used then $event must be explicitly defined as input	`<button @click ="handleEvent($event, 5)">Add</button>`
`@<event>.stop`	Stops (propegation) the bubbling of an event to parent elements as in js `elem.stopPropagation()`.*	`<button @click.stop="doThis()">Add</button>`
`@<event>.prevent`	Prevents the default handling of event as in js `elem.preventDefault()`. If form case HTTP post not done and refresh of page not performed.*	`<form @submit.prevent="handleSubmit()"><input type=text" /><input type="submit" /></form>`
`@<event>.enter.space`	Trigger event function only for `enter` & `space` keys.	`<input @keyup.enter.space="fnc()" />`
`v-if="true/false"` or `v-show="true/false"`	HTML elem invisible if false in both cases. With 'if' the object is totally removed from DOM and cannot be interacted through DOM. With 'hide' it is just hidden but not element not removed from DOM. in both cases the element do not take up any space (opposite to css property `visibility:hidden`). Use `v-show` when toggling visibility often for performance as adding/removing elem from DOM cost. `v-else` and `v-else-if` can be used together with `v-if` but must follow directly in block after. But what if we want to toggle more than one element? In this case we can use v-if on a `<template>` element, which serves as an invisible wrapper.	`<span v-if="bVisible">hey</span>` or `<div v-show="bVisible">hey</div>`
`v-for="(elem, index) in <array>" :key="unique-id"` or `v-for="(value, name) in <object>" :key="unique-id"`	Renders elements based on data in Array or Object. Note! Each element must be marked with unique Key value in order for Vue to identify elements correctly when removing. Note! Index in the array is not unique as elem nbr 1 gets index 0 when elem nbr 0 is removed. This must be something unique for each elem that never changes.	`<ul><li v-for="obj in array :key="text">{{ obj.text }}</li></ul>`

CMQNordic/vue-nuxt-reference-guide.md

Reference Guide - Vue & Nuxt