🌱 Tim's Dev Wiki

Search IconIcon to open search

Vue.js

Last updated September 16, 2022.

Vue.js is a JavaScript framework for building sophisticated UI components in a reusable, maintainable and performant way. Just like for React, there’s a rich ecosystem of npm packages you can plug in to have things like: unit testing, static site generation, client-side routing, state management, etc.

# Setup

Just run the following.

1
2
npm init vue@latest  # Invokes `create-vue` which presents a terminal menu
                     # with prompts to help set up your project.

# Core Things to Know

This section contains all the main things to know to be able to work on a Vue project.

# Writing Components

Components are defined in a single .vue file. Vue provides a template syntax that extends regular HTML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script>
export default {
    data() {
        return {
            message: "Hello world",
        };
    },
    methods: {
        handleClick() {
            this.message = "Goodbye world";
        },
    },
};
</script>

<template>
    <h1 v-on:click="handleClick">{{ message }}</h1>
</template>

You can embed any javascript expression inside the double braces, eg. {{ 42 + Math.PI }}

# Props

Just like React components, every Vue component can take in props.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
export default {
    props: {
        message: String,
    },
};
</script>

<template>
    <div>{{ message }}</div>
</template>

# V- Directives

Directives start with v- and are introduced by Vue’s template syntax. See the full list of built-in directives.

# Computed Properties

When you want to interpolate values inside the component but the expression is complex, you should extract it out into a computed property.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script>
export default {
    data() {
        return {
            val: 0,
        };
    },
    computed: {
        isEven() {
            return this.val % 2 === 0;
        },
    },
};
</script>
<template>
    <input type="number" v-model="val" />
    <p v-if="isEven">I'm even</p>
    <p v-else>I'm odd</p>
</template>

# Lifecycle Hooks

Just like React components, Vue components undergo a similar lifecycle consisting of creation, mounting, updating and unmounting.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
export default {
    beforeCreate() { alert("Before creation"); },
    created() { alert("Created!"); },
    beforeMount() { alert("Before mounting"); },
    mounted() { alert("Mounted!"); },
};
</script>
<template>
    <div style="background: black; width: 200px; height: 200px"></div>
</template>

# Refs

Just like React, you can attach a reference to an element and then access and manipulate it after it’s been mounted.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
export default {
    mounted() {
        this.$refs.animal.innerHTML = "🐕 dogs are better";
    },
};
</script>

<template>
    <div ref="animal">🐈 cats are better</div>
</template>

# Emits

Unlike React, you can make the child trigger events on the parent directly by emitting an event from the child which hits an event handler in the parent.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!-- ChildComponent.vue -->
<script>
export default {
    methods: {
        notifyParent() {
            this.$emit("someEvent", "Hello World!!!");
        },
    },
};
</script>
<template>
    <button @click="notifyParent">Click me</button>
</template>

<!-- Then in the parent component, you add an event listener for 'someEvent' -->
<ChildComponent @someEvent="..." />

# Styling

Broadly, there are 2 approaches to applying CSS to Vue components.

  1. Add a <style scoped> to the .vue file where the CSS within applies only to that component. You could omit the scoped prop to apply styles globally. For SCSS, you can set the prop lang="scss".
  2. Include a .css file from somewhere in the project directory through <style scoped>@import '...'</style> or use an ES import '___.css'.

# Vuex

See state management.

Vuex, designed after the Flux and Redux state management frameworks, introduces a single source of truth to the app that any component can read/write to.