Skip to content
On this page

Vue 3

Items specific to vue 3

Basic concepts common between vue 2 and vue 3.

Tools, setups, installs and environment configuration
vuesomedev/awesome-vue-3: A curated list of awesome things related to Vue 3
vue3 · GitHub Topics

Composition API

Vue3 introduces a new "Composition API" alternative to the original "Options API" in Vue2

ref is used for single variables. Values must be accessed via item.value()

Script Setup

In addition to the composition API, Vue 3 offers a new, simplified way for defining the script section of a component:
Explaining The New script setup Type in Vue 3 - RFC Takeaways - LearnVue
An Introduction to Vue3 Props - A Beginner’s Guide - LearnVue
Setup | Vue.js
Using script Setup for Vue 3 SFCs - DEV Community
vue 3 script setup at DuckDuckGo

Form Components

Now we can create custom input elements that accept a v-model.

  <span class="flex">
    <label>{{ label }}</label>
    <input type="checkbox" v-model="value" />

<script setup>

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  label: String,

const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  set(val) {
    emit('update:modelValue', val)


See also Components

Template References
vue3 reference element in template from script at DuckDuckGo
Template Refs | Vue.js

Starter Template


See also

Boilerplates & Templates

Computed and Watcher

When using computed values, be sure the value is instantiated / applied in a template somewhere, otherwise it won't ever be called.
Computed and Watch | Vue.js

Vue3 also has watchEffect which does not need to return a value (as a computed does).
vue3 props type default at DuckDuckGo
Props | Vue.js
vue3 computed at DuckDuckGo

Lifecycle Hooks
A Complete Guide to Vue Lifecycle Hooks - with Vue 3 Updates - LearnVue

  import { onMounted } from 'vue'

  export default {
     setup () {
       onMounted(() => {
         console.log('mounted in the composition api!')

It is possible to define lifecycle hooks when using <script setup> syntax too.

State management

With the Composition API, if the composable only consists of Javascript, no need for a .vue file, just keep it in a .js file. (otherwise .vue files are an option too. Just pick the right one so syntax highlighting works)

Modules vs Global libraries

Registering libraries at the global app level is discouraged.

With the Composition API, if the module is imported directly where it is used, it will also be imported when the module using the submodule is imported. In other words, try to abstract a call out if you find you are importing it multiple times in to either a related service or a store call.

was looking at where to put axios ended up importing in each component that needs it (pages)

Alternatively, build a services object to handle importing and abstracting calls to the API so you don't need to recreate these in every component.
vite axios at DuckDuckGo
GitHub - Sensanaty/vue3-vite-template
Use vite to quickly build vue3 + elementplus project | Develop Paper
Real World Vue 3: API Calls with Axios
vue.js - How do I handle the "keydown.esc" event in Vue3? - Stack Overflow
vue3 plugins at DuckDuckGo
Plugins | Vue.js
vue.js - Import Axios Method Globally in Vuejs - Stack Overflow
vue3 vue.prototype at DuckDuckGo
javascript - How to use Vue.prototype or global variable in Vue 3? - Stack Overflow
Global API | Vue.js
Global API Treeshaking | Vue.js
vue3 provide axios at DuckDuckGo
javascript - How to correctly import Axios in vue 3 after creating new project with CLI? - Stack Overflow
vueuse at DuckDuckGo
useAxios | VueUse
Configurations | VueUse

Vue Router

It's good to learn how vue-router works.

It can also help when troubleshooting to be able to manually exclude problematic routes.

Automatically Generate Routes for Pages

Some cases, it may help to automatically generate the routes file based on the contents of the ui/pages directory.

Suspense - new feature in Vue 3 - Vue.js Tutorials

Ref vs Reactive

reactive is used for javascript objects.

In practice I'm not seeing reactive used as frequently as ref()

Now, in <script> sections of components, use

export default {
  setup() {



and explicitly make reactive objects by calling reactive()
Core Functions | VueUse
API Reference | Vue Composition API

Roughly based on React Hooks
Introducing Hooks – React
vue3 - Google Search
Vue 3 – A roundup of infos about the new version of Vue.js - Made with Vue.js
Composition API RFC | Vue Composition API





Migrating Vue 2 to Vue 3
convert vue2 to vue3 components at DuckDuckGo
Vue.js: How to Migrate a large project from Vue 2 to Vue 3 | Crisp
Migration Build | Vue.js
vue $attrs $listeners at DuckDuckGo
$listeners removed | Vue.js
List Rendering — Vue.js
vue h function at DuckDuckGo
Render Functions | Vue.js
Instance Properties | Vue.js