👋

Charles Villard

Frontend Engineer, Hewlett-Packard Enterprise

🌐 https://www.charlesvillard.co

🦋 @charlesvillard.co

😶 @cdvillard

Full-Circle

A time-traveler's perspective on Vue

What?!

A history lesson?!
Why talk about this?!

https://www.vuemastery.com/conferences/vuejs-live-2024/10-years-of-vue-the-past-and-the-future/

https://blog.vuejs.org/posts/vue-3-one-piece

https://www.monterail.com/stateofvue

v2.0

September 2016

v3.0

September 2020

February 2019

v2.6

Engineering decisions
have long shelf lives.

Codebase scope/size
Time and budget
v2-locked dependencies
Service-level agreements

This talk won't make you
an expert on anything!

But you'll know where to look.

I guarantee it!

Initialization
Components
Developer tools
Routing

Client-side State
Async State
Meta-Frameworks
Testing

THEN

NOW

Starting a new
Vue Project

Both offer script tag includes

THEN

NOW

<!-- Vue v2 Development -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<!-- Vue v2 Production -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>

<!-- Vue v3 Global Build -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

petite-vue

https://github.com/vuejs/petite-vue

Subset of Vue 3 features optimized for progressive enhancement

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp({
    // exposed to all expressions
    count: 0,
    // getters
    get plusOne() {
      return this.count + 1
    },
    // methods
    increment() {
      this.count++
    }
  }).mount()
</script>

<!-- v-scope value can be omitted -->
<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <button @click="increment">increment</button>
</div>

NOW

Vue CLI

Full system for rapid Vue.js development

https://cli.vuejs.org/

THEN

`create-vue`

Official Vite-powered project scaffolding tool

NOW

https://github.com/vuejs/create-vue

Building Vue Components

https://nitter.net/youyuxi/status/1902652712061395204#m

Vue 2.6.x

Established DX Patterns

Options API
Reactivity via Object.defineProperty
Two-way data-binding
v- directives

https://v2.vuejs.org/

THEN

// Hello.vue

<template>
	<p>
		{{ message }}
	</p>
</template>

<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "Hello, VueConf.US!"
		}
	})
</script>

Vue 3.5.x

Full TypeScript Rewrite

Composition API
Proxies-based reactivity
Improved custom element support
Teleport
Fragments
Suspense

https://vuejs.org/

// Hello-v3.vue

<script setup lang="ts">
	import { ref } from 'vue';
	
	const message = ref("Hello, VueConf.US!");
</script>

<template>
	<p>
		{{ message }}
	</p>
</template>

NOW

Vue 2.7

Backporting v3 features

Composition API based on Object.defineProperty
v-bind for CSS
<script setup>

https://v2.vuejs.org/v2/guide/migration-vue-2-7

https://www.herodevs.com/blog-posts/what-it-really-takes-to-migrate-from-vue-2-to-vue-3

https://github.com/nasa/openmct

Developer Tools

VS Code Extensions

Vetur

Vue tooling for VS Code

https://vuejs.github.io/vetur/

THEN

https://youtu.be/05tNXJ-Kric

Vue Languages Tools

Comprehensive suite of language tooling for Vue.js development

NOW

https://deepwiki.com/vuejs/language-tools

Browser Extensions

THEN

NOW

Vue Dev Tools

Debugging extension fo Vue

Time-travel debugging
Prop inspection and editing
Monitor state, stores, and routes

https://devtools.vuejs.org/

https://devtools-v6.vuejs.org/

Routing

Vue Router

Vue’s official routing plugin

https://v3.router.vuejs.org/

THEN

Vue Router

Vue’s official routing plugin, still.

NOW

https://router.vuejs.org/

That's it?

Kitbag
Router

Type-safe router for Vue.js

https://router.kitbag.dev/

NOW

Client-side
State Management

Vuex

State management pattern + library for Vue.js applications

https://vuex.vuejs.org/

THEN

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* your root component */ })

// Install the store instance as a plugin
app.use(store)

Pinia

Type-safe store library for Vue.js

NOW

https://pinia.vuejs.org/

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore(
  'counter', 
  {
    state: () => {
      return { count: 0 }
    },
    // could also be defined as
    // state: () => ({ count: 0 })
    actions: {
      increment() {
        this.count++
      },
    },
  }
)