DEV Community

Carlo Miguel Dy
Carlo Miguel Dy

Posted on

Getting Started with Nuxt + Composition API + TypeScript

In this article, it assumes you have the basic knowledge and understanding of:

  • Vue
  • Nuxt js
  • TypeScript
  • Vue 3: Composition API

Installation

Open your terminal and run this command npx create-nuxt-app nuxt-ts-composition-api make sure to select TypeScript, and $axios during the selection process.

I’m not gonna go through the installation process but you can refer to the official documentation https://nuxtjs.org/docs/2.x/get-started/installation

Then install @nuxtjs/composition-api module

npm install @nuxtjs/composition-api --save
Enter fullscreen mode Exit fullscreen mode

And add this inside your nuxt.config.js file,

{
  buildModules: [
    '@nuxtjs/composition-api'
  ]
}
Enter fullscreen mode Exit fullscreen mode

That is all we need but for more details head over to the official docs https://composition-api.nuxtjs.org/getting-started/setup

Accessing the Router instance

In Nuxt without TypeScript and Composition API, the usual way of accessing the router instance is via this.$router and that gives us access to methods like push() , back() , go() and etc.

But since we are using the Composition API, we will access it from useContext() method, and it returns as the context from which we can access our Vuex store.

To access it, look at the code below:

Alt text of image

We have to traverse into the store property then we can access the $router instance.

Accessing $axios instance

What about plugins like $axios, how do we access them?

When we are not using TypeScript, we can simply access it by this code this.$axios without the IDE screaming at us that it doesn’t recognize it. But since we want to use TypeScript, it’s going to tell you it does not recognize it.

But we can access it via useContext() method right?

Alt text image

Unfortunately, the Vetur VSCode extension still doesn’t recognize what is $axios.

To fix that, we create a file called index.d.ts and put this in a directory called types in the root directory of our project.

- assets
- components
- layouts
- middleware
- pages
- plugins
- static
- store
- types
  - index.d.ts
Enter fullscreen mode Exit fullscreen mode

Right after creating the types directory and index.d.ts file, your root project should look similar above.

Now inside the index.d.ts file, here we put our type declarations so that our IDE will recognize what is $axios and what does it return.

Now that we have added type declarations, then accessing $axios from useContext() should work now.

And now we can access to the following methods: get() , post() , delete() , put() , and etc to make our HTTP requests.

For more details regarding TypeScript type declarations, you can head over to the official docs https://typescript.nuxtjs.org/cookbook/plugins/

Conclusion

When we have custom plugins in our Nuxt TypeScript app, we make sure to register it inside our type declaration file, I am referring to index.d.ts , so if you were new to TypeScript, files that ends with *.d.ts are considered as type declaration file for TypeScript.

I hope this saved you some time and trouble. That’s all I have to share, have a great day!

Full source code: https://github.com/carlomigueldy/nuxt-typescript-composition-api

Top comments (10)

Collapse
 
rejedai_bot profile image
Rejedai

Section "Accessing the Router instance" is wrong. I spent all day searching and solving a router problem, and found it by accident in the nuxt composition-api documentation.

composition-api.nuxtjs.org/package...

Collapse
 
carlomigueldy profile image
Carlo Miguel Dy

My apologies. Thanks for showing me the solution. There wasn't information in the docs at the time I was writing this I think.

I'll update the section in the content.

Collapse
 
rejedai_bot profile image
Rejedai

Nothing terrible, your post gave me a huge impetus in understanding NUXT + TypeScript + Composition API stack. So thank you!

Thread Thread
 
carlomigueldy profile image
Carlo Miguel Dy

Thank you again for taking the time to read it! :)

Collapse
 
viviansolide profile image
Vivian Sarazin

Thanks!
Very useful :)
I'm trying to reproduce this trick for strapi module.

Collapse
 
carlomigueldy profile image
Carlo Miguel Dy

I'm glad this was useful for you :)

Collapse
 
errorje profile image
ErrorJe

ths ! I'm building project base on your article, and i realy hope you can output more nuxtjs + typescript + compositionAPI + usefulplugins article

Collapse
 
carlomigueldy profile image
Carlo Miguel Dy

Thanks man! I will try to put out more articles about this. Stay tuned!

Collapse
 
dykomar profile image
dykomar

Hi!

where can i get $nuxt? i want to access $loading frome it

thanks!

Collapse
 
esmaydogdu profile image
Esma Aydoğdu

It worked with
buildModules: [
'@nuxtjs/composition-api/module'
]
for me, leaving the note if anybody will have the same issue!