How to use Vue Composition API using TypeScript - Part 1

As you know, Vue 3 comes with a new feature called Composition API and i'm guessing at this point we know about it, but if you want to test such feature there are some Vue Plugins that allows you to start using it right now.

At this example we are going to use these following tools:

• Vue 2.6.10
• VueCLI 4.0.5
• TypeScript 3.5.3
• @vue/composition-api
• Your favotire code editor (mine is VS Code ❤)

Let's the begin with this tutorial.

Setting up the project

In case you don't have VueCLI installed we procced to use the next command:

npm i -g @vue/cli

This will install the CLI we are using in this tutorial, to check if you have it installed use:

vue --version or vue -V

This may return with the latest build you have, in my case is: 4.0.5

Now that we have the CLI installed, go to the directory of you preference and execute the next command:

vue create <give_any_name_you_want>

This will start the creation of the project, but before it's done we have to select few options.

Right after we entered the command, the CLI will ask us what preset we want to use, select Manually select features and press Enter.

After that will show up a menu with some options, we may select pressing the Space Bar the next options and press Enter:

Use class-style component syntax? (Y/n) n
According to the Vue document for Typescript, the ream recommens using the Vue.extend method instead of this one, so we select No

Use Babel alongside TypeScript? Y
We need to transpile our code to work on any browser

Pick a linter / formatter config: Choose the one of your preference, in my case: ESLint + Standard, but please, don't select TSLint, that one is deprecated! (https://medium.com/palantir/tslint-in-2019-1a144c2317a9).

Additional lint features:
Lint on save

Placing config for Babel, Eslint, etc.?
In dedicated config files

And if you want to save the setup, press Y and give a name to it, now we may wait until the CLI finish installing everything. After the CLI finished move into the folder, just before we start coding we need few more npm dependencies, let's move on with:

npm i -S axios @vue/composition-api

After the installation is done we are ready to begin the code!

In the next part we are preparing and coding our interface and service to be consumed in our Vue App, so be ready to code!