Vue.js Framework

Common errors

• [Vue warn]: Failed to resolve component: X

  cause A component named 'X' was used in a template but was not correctly imported or registered (globally or locally).
  fix Ensure the component is imported at the top of your script and then registered in the `components` option of your parent component, or globally if desired. Check for typos in the component name.

• TypeError: Cannot read properties of undefined (reading 'value')

  cause You are attempting to access `.value` on a `ref` variable that is currently `undefined` or `null`. This often happens when a `ref` is not yet initialized or when an element it's meant to reference hasn't been mounted.
  fix Ensure your `ref` is properly initialized, or use optional chaining (`myRef?.value`) if it might be `undefined`. If it's a template ref, access it after the component has mounted (e.g., in `onMounted`).

• [Vue warn]: Property "X" was accessed during render but is not defined on instance.

  cause A property or method named 'X' was referenced in your component's template or script, but it doesn't exist in the component's data, props, computed properties, or methods.
  fix Double-check the spelling of 'X'. If it's data, ensure it's returned from `data()` or defined as a `ref`/`reactive` in `setup()`. If it's a prop, ensure it's declared in the `props` option.

• Component is missing template or render function.

  cause Vue components require either a `<template>` block or a `render` function to define their output. This error occurs when neither is provided.
  fix Add a `<template>` block to your `.vue` file or define a `render` function within your component's options/setup. If using a build tool, ensure `.vue` files are correctly processed by a Vue loader.

Warnings

• breaking Migrating from Vue 2 to Vue 3 involves significant breaking changes, including the move to the Composition API, changes to global APIs (now instance-based), and removal of some features like Filters and Event Bus.
  Fix: Consult the official Vue 3 migration guide. Be prepared to refactor components and update build configurations.
• gotcha When using `ref` for reactive variables in the Composition API, you must access its value using `.value` in the `<script setup>` block. However, in templates, Vue automatically unwraps `ref`s, so you can use them directly without `.value`.
  Fix: Remember the `.value` convention in JavaScript/TypeScript code, but omit it in Vue templates. E.g., `myRef.value++` in script, `{{ myRef }}` in template.
• gotcha The `v-model` directive on custom components in Vue 3 now expects a `modelValue` prop and emits an `update:modelValue` event by default. This is a change from Vue 2's `value` prop and `input` event.
  Fix: Ensure your custom components accept a `modelValue` prop and emit an `update:modelValue` event. You can also customize the model name using `v-model:yourPropName`.
• gotcha The `key` attribute is crucial when using `v-for` to render lists of elements. Providing a unique and stable `key` helps Vue efficiently identify nodes, manage component state, and optimize rendering performance.
  Fix: Always bind a unique `key` to items in `v-for` lists, preferably using a stable ID from your data. Avoid using array indices as keys if the list items can be reordered or filtered.

Install

• npm install vue npm
• yarn add vue yarn
• pnpm add vue pnpm

Imports

• createApp

  import { createApp } from 'vue';

• ref

  import { ref } from 'vue';

Quickstart

This quickstart initializes a basic Vue 3 application, demonstrates reactivity with `ref`, and shows how to mount it to an HTML element. Place `<div id="app"></div>` in your HTML to see the output.

import { createApp, ref } from 'vue';

const app = createApp({
  setup() {
    const message = ref('Hello, Vue 3!');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      message,
      count,
      increment
    };
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
});

app.mount('#app');