Vue 3 TypeScript edition

The biggest notable new features for Vue 3 are the Composition API  and full support for TypeScript. Overall Vue 3 is mostly backwards compatible. The only change I’ve found rewriting the Bitcoin Converter is that in 3.x, filters are removed and no longer supported. Instead, they can be replaced by a method call.

And there’s a new build tool in the Vue ecosystem called Vite. Its dev server is 10-100x faster than Vue CLI’s. We used Vite instead of Vue-CLI this time to scaffold the project and to start the dev server.

Composition API

To read in detail about the Composition API, see the original Vue documentation about the Composition API: An introduction to the Composition API.

Basically everything for the component is now initialised in the new setup function. This function is executed before the component is created, once the props are resolved, and serves as the entry point for composition API’s.

Reactive variables need to be wrapped in ref() functions.

A components setup function might look like this:

import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs } from 'vue'
 
setup (props) {
  
  const { user } = toRefs(props)
  const repositories = ref([])
  const getUserRepositories = async () => {    
    repositories.value = await fetchUserRepositories(user.value)
  }
 
  onMounted(getUserRepositories)
  watch(user, getUserRepositories)
 
  return {
    repositories,
    getUserRepositories
  }
}

TypeScript

TypeScript enables us to use types and have those types checked during the compile phase.

setup(props: Readonly<IProps>) {
    const loadingStatus = ref<String>(LOADING_STATUS.NOT_LOADING);
    const loadingError = ref<String>();
    const tickerPrice = ref<TickerPrice>();
}

“Vite” Build Tooling

Similar to Vue CLI, Vite is also a build tool providing basic project scaffolding and a dev server.

However, Vite is not based on Webpack and has its own dev server which utilizes native ES modules in the browser. This architecture allows is to be orders of magnitude faster than Webpack’s dev server.

Vite is currently in beta and it appears that the aim of the Vite project is not to be an all-in-one tool like Vue CLI, but to focus on providing a fast dev server and basic build tool.

Demo

Live demo Vue 3 – Bitcoin Converter

https://sandbox.juurlink.org/vue3/

Resources

 

All variants of the Bitcoin Converter Application

  • 2021 – Vue 3 TypeScript Bitcoin converter application blog src demo
  • 2020 – Vue.js Bitcoin converter application – part 2 blog src demo
  • 2019 – Vue.js Bitcoin converter application – part 1 blog src demo
  • 2017 – Angular Bitcoin converter application [blog] src demo
  • 2013 – AngularJS Bitcoin converter application blog src demo
  • 2013 – Backbone Bitcoin converter application blog src demo

Leave a Reply

Your email address will not be published.