Vue

Vue is a javascript framework for creating single page web apps.

I'm learning Vue while also learning javascript.

The following tutorial has a really nice complete vue with rest api and vue router example.

link

Directives bind a vue object to an HTML element and allow you to do stuff like update text or show an element.

v-bind allows you to programmatically define classes for an html tag.

Here's a good tutorial for this.

In the new Vue object, there seems to be a list of parameters you can pass in.

new Vue({
    el: '#app',
    data:{
        price: 100,
        taxRate: 0.10,
    },
 
    computed: {
        tax: function() {
            return this.price * this.taxRate;
        }
    }
});

Computer properties are just like properties but they are computed based on a function. You then can use them just like a property in the template section.

computer: {
  tax: function() {
    return this.price * this.taxRate;
  }
}

Methods are your functions in Vue. They take in parameters and can return anything.

Slots

Here's a decent explanation.

Components in Vue allow you to create html like elements that you custom make. You need to pass in a template to build them. In the template you need to have only one root element, so wrap everything in a div.

Vue.component('accordian', {
    props: ['item'],
    template: `
    <div>
        <hr>
        <p>{{ item.title }}</p>
        <button @click="item.details = !item.details">Show details</button>
        <p v-if="item.details">Details:</p>
        <p v-if="item.details">{{ item.description }}</p>
    </div>
    `,
});

Child components can communicate to parent components by using emit.

Much easier to use Vuex which allows for a state store that you can access from any component.

Bunch of tooling for scaffolding a Vue project. Purty cool.

Link.

You can set up authentication through firebase by installing firebase in your project, setting it up using a firebase.js file and then setting up the router to guard routes that need to be authorized.

I am trying out Vuetify for a frontend because it looks to have more support than Bulma (Beufy based front end).

I added vue by doing vue add veutify.

<v-app> is the root tag for vueitfy. It needs to be there in every template.

You can use props on tags to modify them. They can be just one word on the html tag.

Here's a sampling of stuff you can do to tags:

<p class="pink lighten-4 red--text text--darken-4">

You can use fontawesome and icon materials with vuetify. You can add them to the vuetify.js file.

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify, {
 iconfont: 'fa'
})

Learning how to use Vueitfy grid.

All grid elements go inside a v-container tag.

The tags that go in v-container used to be called v-layout and v-flex but were changed to v-row and v-col in 2.x.

You can run rules inside a debounce function very easily if you follow this syntax:

https://codepen.io/bviala/pen/WYeVyP

To run code whenever a variable changes use watch functions. To watch data that is nested in other data you can follow this:

https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data

https://www.youtube.com/watch?v=lv-KHdoeSoI&ab_channel=VueScreencasts