Vue is a web framework, similar to React with its special blend. Vue takes the work of managing multiple states, and boilerplate to make it easier for the developer to work with.

Vue.js comes out in 3rd place concerning Angular and React.

Vue is also on the rise, as it works its way to surpassing Angular and onto better horizons. I figured it would be a great time to build this guide to help you become fluent with this framework. This setup will be using the Vue CLI and Vue’s Composition API to make dealing with all that extra boilerplate much easier. So let’s get started!

Installing the Vue CLI

Let’s make sure you have Node installed. Go to your terminal and type:

node -v

If a node version is displayed. Great! Feel free to move on. If not, please install the Node LTS version here: https://nodejs.org/en/

Once installed, verify you have Node installed by running the above command again. Then, in your terminal window run the following:

npm install -g @vue/cli

Notice the “-g” flag, it’s crucial you do this because it will install the Vue CLI globally on your system and not just to a specific project. Going forward this means you could avoid the previous steps to get set up and jump right into the project setup step.

Create a Project

It’s time to create the project, in the terminal, please navigate to where you would like your project to be created. Then, start the CLI like so:

vue create "YOUR-PROJECT-NAME"

You will be introduced to a step-by-step setup. Let’s select the correct options for Typescript development:

  1. Manually select features
  2. Select Babel, Linter, and Typescript
  3. Use Version 3.x
  4. Choose if you want to use class-style components. (I chose, no)
  5. Use Babel alongside Typescript? Yes
  6. Choose your desired linting type: I chose ESLint with error prevention only
  7. Lint on save
  8. Choose where you would like to place configs: In dedicated config files
  9. Choose if you want to preset these settings for future projects: No

Install Typescript Dependencies

At this point in time, you should have received all the necessary dependencies to start your development in Typescript, however if you still can’t use Typescript in your setup run the following:

Let’s run this command to install our development dependencies:

npm install -D typescript @vue/cli-plugin-typescript @vue/eslint-config-typescript.

You should see a “main.ts” file in your “src” folder. There you should see that the boilerplate code for setting up your app has been added. Other Please feel free to add the following lines:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Now You’re ready. Some Caveats.

Typescript is a great way to get started on strictly typing your code with Vue. However, there are some code practices or potential issues that I think I should mention ahead of your development. This way you’ll be prepared for when it happens. I may update the list of caveats later as I discover more.

  1. Your <script> tag should always be formed like so: <script lang=”ts”> to use Typescript and additionally since we’re using composition API it should be: <script lang=”ts” setup>.
  2. Writing types for refs. You can add types to ‘Ref’ here’s an example:
    const months = ref<number>();
    const Game = ref<Game>();
    const Games = ref<Game[]>();
    const testObj = ref<{id: number; someOther: string}>();
  3. Types for HTML elements. If you need to use something like an ‘input’ element. The type should be: ref<HTMLInputElement | null>
  4. Always try to define your refs with a data type and try to use interfaces in place of default objects.
  5. Avoid using the type ‘any’, it will make it easy for your development if you ide can tell you what methods are available to you based on the type. This is especially. helpful for Vue development since you usually don’t have to reference the documentation after doing so.
  6. ref on HTML elements and ref for reactivity are two different measures but still have the same benefit they will give you reactivity. Just remember that ref on an HTML element SELECTS that specific element, therefore, allowing you to gain access to that element’s methods. The ref defined inside your <script> tag is for you to handle all types of reactive data.
    Here’s an example: if you are using the <input type=”file” /> you’ll want to use ref if you want to have access to the file that was uploading. In this instance use <input type=file ref=coverPhoto />. You should now be able to access coverPhotos data inside your <script>.

I hope this guide helped you get started on your Vue.js with Typescript journey. If you have any other caveats that you want to mention please feel free to leave a comment and I will be sure to add it to this post.