skip to content

scratchpad: vue3

vue3 notes reference
Tags: #vue #vue3
Last updated: Sep 9, 2022

Working notes/playground thingy here:


with create-vue:

npm init vue@latest

or with create-vite:

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
  • create-vue also uses vite, there doesn't seem to really be a lot of difference between them, they install basically the same packages.
  • create-vite adds "type": "module" in package.json while create-vue doesn't

runtime or browser compilation

(honestly not that important of a topic, but the examples I was seeing in documentation confused me for a minute and figuring it out helped me internalize a little more about how Vue works)

Some docs use super simple components written like this in examples:

const PersonObject = {
props: ['id'],
template: '<div class="page">Person: </div>',
  • this way of creating components requires Vue's template compiler in the browser, which isn't actually set up by default using create-vite etc
    • the whole point is you're compiling your templates in advance (in a build step), before they get to the browser.
  • use an alternate vue build to get the browser compiler
    • change import { createApp } from 'vue' in main.js to import { createApp } from 'vue/dist/vue.esm-bundler'
    • this gives you regular build step + template compiler in the browser.
      • also a bigger file + probably in real life not a lot of reason to do this
  • resources:

some definitions

  • Single-File Component (SFC): .vue files. Simply means that the template, logic (scripts), and styles of a Vue component are in a single file. (VueJS docs page on SFCs)
  • 2 API styles
    • Options API: All the logic for a component is defined within an object with a bunch of options. Options are things like data, methods, computed, etc. The 'old way' of writing components. Access properties defined in the options object with this.
    • Composition API: Logic for a component is defined in a setup function or most often inside <script setup> (setup tells Vue that it needs to do some particular compilation magic). The 'new way'. Import functions like onMounted and computed to use those parts of Vue in a particular component.
    • Resources: vue docs explanation of API styles - also if you just browse the docs, you can toggle a switch in the sidebar between options & composition APIs


playground: dynamic routes notes & examples

Install Vue Router & import it in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'

// some components
import Home from './contents/Home.vue'
import About from './contents/About.vue'

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }

const router = createRouter({
history: createWebHistory(),


Now in App.vue:

<div class="wrap">
<div class="links">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

names + dynamic routes + props

  • named routes: provide a name to a route, then call up that name in an object in <router-link>
  • use a colon (:) in front of part of the route to make it dynamic
  • you can then use that dynamic bit as a variable in your code, either through $route.params or as a prop, if you add props: true to the route object

example of a dynamic route with param id:

const routes = [ { path: '/person/:id', component: Person, name: 'person', props: true }]
// in router-link
<router-link :to="`person/${}`">
<router-link :to="{ name: 'person', params: { id: }}">

// in Person component:
<div>ID: {{ $ }}</div>

// as a prop in Person component (only works if props: true in the route definition)
<script setup>
const props = defineProps({ id: String })
<div>ID: {{ id }}</div>

reactivity options vs. composition