Nuxt.js and TypeScript configuration

headshot of author of blog post
Matt Davis
Posted in:
Errors
Nuxt.js
TypeScript

So what happened?

It all started when I wanted to contribute to open-source. I began searching for a project that was small enough I could make an impact and be able to speak with the maintainers directly. I found activist.

After a couple of small PR's, I decided it was time to tackle something more challenging.

Enter the issue.

Property X does not exist on type '{}'. ts(2339)

After much head-scratching, I discovered the project had nothing telling Nuxt to actually use TypeScript. TypeScript is set up and defined out of the box with Nuxt, however, the setup has to follow the given guidelines. Given the project was using a couple of VSCode extensions (as recommended by Nuxt and Vue) it was time to go back to the drawing board.

Enter the template.

Following the `package.json` and `nuxt.config.ts` I noticed that both `typescript` and `vue-tsc` were missing. My limited brain noticed an issue here. Don't we need typescript to use typescript?

Heading back to activist, I installed the packages and of course

I had a Docker error.

ERROR Cannot start nuxt: Cannot find module 'vue-tsc/out/proxy'

After a full Docker system prune everything is fine, meh Docker.

TypeScript is now working! But wait, there is more, the greatest challenge of them all. The build command now fails. Way too many TS errors. So clearly Netlify didn't like that.

Enter the power of `yarn nuxi typescript` 

1yarn nuxi typecheck

I said it twice because I wanted to make sure you know this command. With just three little words we can manually check the types in a Nuxt project. I only found this once I actually read the Nuxt docs. It is important to read the docs, people!

1
2Found 51 errors in 13 files.
3
4Errors  Files
5     6  components/Btn/BtnLabeled.vue:19
6     1  components/Card/CardConnect.vue:78
7     3  components/Card/CardGetInvolved.vue:7
8    20  components/Card/CardSearchResult.vue:11
9     6  components/Grid/GridGithubShields.vue:3
10     1  components/Image/ImageGithubShield.vue:3
11     4  components/LandingPage/LandingPageContent.vue:37
12     1  components/Menu/MenuMobileSelector.vue:6
13     1  components/Popup/PopupNewField.vue:30
14     3  components/Sidebar/Sidebar.vue:13
15     2  components/WebsiteHeader.vue:40
16     2  pages/events/brandenburg-gate-climate-demo.vue:28
17     1  pages/organizations/tech-from-below.vue:28
18

After heading to trusty ChatGPT with some error codes I was getting nowhere, so I returned back to the human world and asked for help. It actually worked! I was told that given the project has been functional up until this point why not disable strict mode to allow the build to proceed? WOW! Humans actually got it right, this worked like a charm. Now I need to create an issue for all of these errors to make sure we can work towards a type-safe system in this project.

To wrap up:

  • Read the docs
  • Ask for help from real humans and be kind about it
  • TypeScript in Nuxt is the best.
  • Docker, meh.
 Back