Vue.js in 2023 – Some tips you should know.

In next, I'll suggest many tricks to improve your experience with using Vue.js.

Vite + Unplugin

It's common to find developers who complain about the “verbosity” of the framework. However, when using Vite with a few more addendums, it is possible to shorten the syntax a lot, leaving the project much cleaner than what is normally found.

Below, a comparison between a common use with Vue 2 x an example using Vue 3+, Vite, unplugin-auto-import and unplugin-vue-components:

Common:

<template>
  <aside>
   <ComponentOne />
   <ComponentTwo />
  </aside>
  <main>
    <h1>{{ upper }}</h1>
    <ComponentThree />
    <ComponentFourth />
  </main>
</template>

<script>
import ComponentOne from './components/ComponentOne.vue'
import ComponentTwo from './components/ComponentTwo.vue'
import ComponentThree from './components/ComponentThree.vue'
import ComponentFourth from './components/ComponentFourth.vue'

export default {
  components: {
    ComponentOne,
    ComponentTwo,
    ComponentThree,
    ComponentFourth
  },
  props: {
     title: String
  },
  computed: {
    upper: function () {
      return this.title.toUpperCase()
    }
  }
} 
</script>

Reimagined:

<template>
  <aside>
   <ComponentOne />
   <ComponentTwo />
  </aside>
  <main>
    <h1>{{ upper }}</h1>
    <ComponentThree />
    <ComponentFourth />
  </main>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string
}>()

const upper = computed(() => props.title.toUpperCase())
</script>

Using unplugin-auto-import, keep attention in file names for don't override other .vue files. I recommend that you choose a structure that guarantees naming that will not cause conflicts.

Hooks

Decoupling methods using mixins has always been torture. However, with Vue 3 it is possible to use the API separately and reuse methods with ease:

export const useHook = () => {
  const data = ref('foo')

  const fn = () => {
    // ...
  }

  return { data, fn }
}

// in .vue file

<script setup>
const hook = useHook()

console.log(hook.data.value)
</script>

teleport

is a built-in component that allows us to “teleport” a part of a component's template into a DOM node that exists outside the DOM hierarchy of that component.

It's a very useful feature to reposition elements that are global or that need to be in another part of the tree at some point. A generic usage is to send an element to the root and position it absolutely:

<Teleport to="body">
  <UserInfoModal v-if="open" />
</Teleport>

Using a state manager (Vuex, Pinia) in conjunction with teleport enables greater control and reability of elements.

defineModel

Since Vue 3.3.x, it is possible to create material components and similar features.

Before, the common case is propping with modelValue and emitting the changed value to the top component, “simulating” a reactive prop:

Common:

<template>
  <input v-model="cmp" />
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'

  const props = defineProps<{
    modelValue: string
  }>()

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

  const cmp = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emit('update:modelValue', val)
    },
  })
</script>

With defineModel:

<template>
  <input v-model="modelValue" />
</template>

<script setup lang="ts">
const modelValue = defineModel()
</script>

Simple, isn't it?

Nuxt 3

Nuxt it's a Vue framework that you probably know or have heard of. It is currently in a great phase, with a solid ecosystem due to the modules and with several features, that will surely add to your project.

VueUse

VueUse is a collection of essential vue composition utilities. It's a great choice if you're looking for ready-made solutions to common problems, and it can save you a good few hours of development.

Considerations

Vue.js is at it's your best when it comes to productivity and used concisely, it has everything to add to your work (and please don't rewrite an entire system just because of these tips). Thanks for reading!