Skip to main content

About

Ask Question
Tag Info
Info Newest Frequent Score Active Unanswered

Vue.js is an open-source, progressive JavaScript framework for building user interfaces that aims to be incrementally adoptable. Vue.js is mainly used for front-end development and requires an intermediate level of HTML and CSS. Vue.js questions are highly version specific and should always be tagged with [vuejs2] or [vuejs3] in addition to this tag.

What is Vue.js?

Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.

Instead of performing manual updates to the DOM, which can be repetitive and error-prone (think jQuery), Vue embraces the idea of "data-driven views," where changes in data drive changes in the DOM.

This idea forms the core of Vue.js: a reactive data-binding system that is designed to make it extremely simple to keep your data and the DOM in sync.

Vue data-binding diagram

What makes Vue particularly powerful, however, is that it can be built upon, increasing its functionality from a simple view-model library to that of a fully-fledged JavaScript framework capable of powering entire SPA's via supporting plugins and libraries such as Vue Router and Pinia.

Features

Vue.js includes:

Questions that are version specific should be tagged with or respectively.

Vue is compatible with all ES6-compliant browsers. As such, IE is unsupported.

To check out an in-depth guide with live examples or the official docs, visit vuejs.org.

Code Example

All that is required to use Vue in a project is to create a Vue instance, and tell it where to render in the DOM. Vue handles the rest!

The code below forms a simple, fully functioning Vue app:

<html>
<div id="demo">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  const app = Vue.createApp({
    setup() {
      return {
        message: Vue.ref('Hello Vue.js!')
      }
    }
  })
  app.mount("#demo"); // Tells Vue to render in HTML element with id "demo"
</script>
</html>

See a live and editable version here.

Related Tags

UI Frameworks built with Vue.js

Tooling

Resources

Official Logo:

Using Vue in Stack Snippets

It is often useful to share runnable snippets of code in questions regarding Vue components. Since Stack Snippets can't natively run Vue single file components (.vue files), it's necessary to do a little conversion work.

To create a Stack Snippet containing Vue in a Stack Overflow post, make sure you:

  1. Import Vue into the HTML section of the snippet
    • You can do this through the sidebar of the snippet editor itself:
      Vue version select in snippet editor sidebar
    • Or by manually adding a <script> tag
      (eg. <script src="https://unpkg.com/vue@3"></script>)
    • NOTE: It's important that the Vue import is before other imports of libraries that depend on Vue (eg. Vue Router)
  2. Wrap component JavaScript with Vue.createApp({...})
    • Replace default export with Vue.createApp, and don't forget the parenthesis () around your brackets {}
    • Note that you won't be able to use import statements, so you should trim everything out of the snippet that's not strictly necessary to understand your question and the problem at hand
    • You may also need to add example data if your component relied on props or APIs
  3. Tell the new Vue instance where to render in your HTML
    • Use the mount method of the new Vue instance to indicate what HTML container Vue should render in (see example below)

You may also want to replace your <template> HTML elements with some alternative (ie. <div>) if it causes issues.

Starting with something like this:

HelloWorld.vue

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello World!')
</script>

Will end up with something like this:

HelloWorld.html

<html>
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue@3"></script>
<script>
  const app = Vue.createApp({
    setup() {
      return {
        message: Vue.ref('Hello World!')
      }
    }
  })
  app.mount('#app')
</script>
</html>

You can drop this straight into the HTML section of a snippet, or split it into the HTML and JavaScript sections accordingly. Bear in mind that splitting it may make the code clearer to readers!

History Usage Guidance history

Code Language (used for syntax highlighting): lang-js


X