Vue has become a popular framework for web development and with the recent changes made in Vue 3, I've decided to create this post where we'll look at 15 tips and tricks for increasing productivity, maintainability, and scalability when creating Vue apps.

Vue Style Guide

While Vue is great at letting you choose what’s best for you, there is a style guide to help you avoid common errors and anti-patterns. You can automate some of this by using the vue-eslint-plugin which comes preconfigured when creating a Vue app using the CLI tool. You should go into the .eslintrc.js settings and change it from vue3/essitional to vue3/strongly-recommended you can considerably improve code readability and dev experience.

Use NuxtJS

You should also consider using Nuxtjs once it's available for Vue 3. If you plan to build a production-ready Vue application, it solves many of the problems such as SSR and dynamic routing. It also provides an ecosystem of plugins you can use to build your application faster. Most importantly it comes with a nice loading screen so you have something to look at when your application is compiling.

Template Interpolation

When using visual studio code you should already have Vetur installed. You can make this plugin even more useful by enabling the experimental templateInterpolationService which adds even more auto-completion and type lookups in a Vue component template. This can save you time from having to open up child components to view their props and event types.

Vue 3 Snippets

I also recommend installing Vue 3 Snippets Highlight Formatter. This will give you shortcuts for increasing your productivity when coding in Vue 3 or Vue 2. When installed you can use shortcuts to quickly import functions from Vue and type out boilerplate code required for creating components with just a few keystrokes.

Prettier

You should also grab the prettier extension, which will automatically format your code. This is a huge timesaver and you'll notice I use it in all of my applications. You can install the package library with npm install prettier or have it come configured with your Vue app by enabling it in the CLI tool.

Now you'll be able to create a .prettierrc file that describes how the code should be formatted. Personally, I like to disable semicolons, use single quotations, and remove any trailing commas. If you have installed the Vue 3 Snippet plugin, you will need to go into the settings and disable its formating options to get this to work correctly.

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

Error Monitoring

Error monitoring is important in production and we can use the errorHandler function to send errors to services like Sentry and Bugsnap for tracking. This function gets called whenever an error is thrown inside your Vue application and has 3 arguments the error trace, the vm component, and Vue specific information such as the lifecycle hook or event that causes the error. You could also add a function to any of your components called errorCaptured, which will be called when any descendent component throws any error.

app.config.errorHandler = (err, vm, info) => {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in
}

Enable Performance in Vue Config

That's incredibly useful, but we should also enable the performance options in development mode to get more information when debugging. We can view the performance of application mount, render, and more by opening the dev tools, going to the performance tab, and then recording an interval we would like to inspect. In our example, I will just refresh the screen. Now under the timings section, we can see information showing the load times for each Vue component.

app.config.performance = true

JSX

Don't be afraid to use JSX as you can create small reusable utility components instead of having to create a new file for each one. For example, we can create two simple increment and decrement counter buttons which will apply the operation whenever the button is clicked.

const IncButton = {
  setup() {
    const count = ref(0)
    const inc = () => count.value++
    return () => <button onClick={inc}>Inc</button>
  }
}

const DecButton = {
  setup() {
    const count = ref(0)
    const dec = () => count.value--
    return () => <button onClick={dec}>Dev</button>
  }
}

Abstract Away with Compositions Functions

Similarly, the new composition API makes it's really easy to abstract away common utility functions that may be useful across projects and make your code more readable. I suggest you also take a look at other libraries like VueUse which come with a whole bunch of utility functions.

Async Components

When we import our previously created components we can use asyncComponent to improve loading times. Using the import statement we are able to create a separate javascript file that will be requested when the component is required. This saves your users from loading components they may never need.

defineAsyncComponent(() => import('./LargeComponent.vue'))

Pacal Case

Using Pascal Case to make it easier to differentiate between HTML and Vue components. Depending on the extensions you have installed it can also give them a different highlighted color making it even more clear.

ES2020 Support

A super needed addition inside of Vue's single-file components is support for all the new features in ES2020. Out of all of them, optional chaining is the one I use most frequently. It allows for shorter and simpler expressions when accessing chained properties when there may be a possibility of a missing value. It can also be helpful while exploring the content of an object when there's no guarantee to which properties are required.

Use VeeValidate

When you want to create forms you should use a library like VeeValidate that can simplify the entire process. When working with forms in front-end development not only do you have to deal with ensuring correct values are submitted but you also have to make it presentable to the users.

Libraries like VeeValidate make this process super easy.

Vue Docs is King

Overall no matter what the project you are building in Vue, the documentation is your best friend. The Vue team has really put a lot of afford into making them clean and concise which is an additional feature I find that separates Vue from other frameworks.

Follow me on Youtube!

And lastly, don't forget to subscribe to my channel and turn on the bell notifications to learn more about building applications with Vue!

If you have suggestions on content you would like to see drop a comment below.

Hopefully, you can use all of these tips to help you create production-ready Vue apps. Thanks for watching and hope to see you in the next one.