Vue Cheatsheet

Vue.js for Beginners Part 1

Step 1: Understanding Vue.js

Vue.js is a progressive JavaScript framework used to build user interfaces. It's designed from the ground up to be incrementally adoptable. The core library focuses on the view layer only and is easy to pick up and integrate with other libraries or existing projects.

Step 2: Installing Vue.js

You can include Vue.js in your project through a CDN (Content Delivery Network) or by installing it via NPM (Node Package Manager).

Step 3: Creating a Vue Instance

Every Vue application starts by creating a new Vue instance with the Vue function:

var vm = new Vue({
  // options
});

Step 4: Understanding Vue Directives

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

<div id="app">{{ message }}</div>

Step 5: Vue Components

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code.

Vue.component("button-counter", {
  data: function () {
    return {
      count: 0,
    };
  },
  template:
    '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
});

2. Vue.js with TypeScript

Step 1: Understanding TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components.

Step 2: Setting up TypeScript in Vue

To start a new TypeScript project with Vue, you can use the Vue CLI. When creating a new project, select "Manually select features" and then select "TypeScript".

Step 3: Creating Vue Components with TypeScript

With TypeScript, we can create more robust components. We can set a type to our props and state, to ensure we are always using the correct data type.

import Vue, { VNode } from "vue";

export default Vue.extend({
  name: "YourComponent",
  data(): { message: string } {
    return {
      message: "Hello from Vue and TypeScript!",
    };
  },
  methods: {
    greet(): string {
      return this.message;
    },
  },
  render(createElement): VNode {
    return createElement("div", this.greet());
  },
});

3. State Management with Vuex

Step 1: Understanding Vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Step 2: Installing Vuex

You can install Vuex via NPM. In your Vue project, run npm install vuex.

Step 3: Setting up a Vuex Store

A Vuex store is basically a container that holds your application state. Here is a simple Vuex store definition:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

import { createPinia } from "pinia";

const pinia = createPinia();

export const useStore = defineStore({
  id: "main",
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});