Upgrading to Nuxt 2.9 with Typescript

I just wanted to document a couple issues I came across today in case it helps someone else.

After following the upgrade guide, I was still left with a couple issues. Bear in mind I am using the class API. The advanced examples are not ready yet, hence the need for this blog post.

The first issue I had after setting up my config was I got this warning WARN No pages directory found in /home/amritk/apps/hc/front-end. Using the default built-in page and all I saw was the default nuxt page. I knew my nuxt config wasn’t being read. I realized I had missed the runtime part of the migration process. That was a simple enough fix, just had to use nuxt-ts instead of nuxt in my package.json.

The next issue I saw was:

ERROR  ERROR in /home/amritk/apps/hc/front-end/src/pages/team-finder/request-kind-uuid.vue(83,5):
83:5 Argument of type '{ layout: string; head(): { title: string; meta: ({ hid: string; name: string; content: string; property?: undefined; } | { hid: string; property: string; content: any; name?: undefined; } | { hid: string; content: string; name?: undefined; property?: undefined; })[]; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, and 'layout' does not exist in type 'VueClass<Vue>'.
    81 | 
    82 | @Component({
  > 83 |     layout: 'team-finder',
       |     ^

This was solved by changing over everything to vue-property-decorator from nuxt-property-decorator.

But I still had a few more of these:

ERROR ERROR in /home/amritk/apps/hc/front-end/src/pages/team-finder/feeds-index.vue(46,5):
46:5 Argument of type ‘{ head(): { title: string; meta: ({ hid: string; name: string; content: any; property?: undefined; } | { hid: string; property: string; content: string; name?: undefined; } | { hid: string; content: string; name?: undefined; property?: undefined; })[]; }; middleware: string; layout: string; }’ is not assignable to parameter of type ‘VueClass<Vue>’.
 Object literal may only specify known properties, and ‘head’ does not exist in type ‘VueClass<Vue>’.
   44 | 
   45 | @Component({
 > 46 | head () {
      | ^
   48 | return {
   49 | title: this.$t(‘team_finder.title’) as string

Now previously I had kept my head() {} function inside of the component options and asyncData in the class properties like so:

@Component({
    layout: 'explore',
    head () {
        return {
            title: 'An awesome title'
        }
    }
})
export default class Landing extends Vue {
    async asyncData ({ query, store }) {
        return await someData()
    }   
}

All I had to do was swap asyncData and head() {} like so:

@Component({
    async asyncData ({ query, store }) {
        return await someData()
    },   
    layout: 'explore',
})
export default class Landing extends Vue {
    head () {
        return {
            title: 'An awesome title'
        }
    }
}

**Note: fetch() {} would also work like asyncData in this case and have to be moved to the component options.

And we’re back in business. I hope this helped someone out. If you would like to see more quick posts like this on Vue.js, Nuxt, Typescript or Cordova, hit the clap button and I’ll try to document the issues I come accross more often.

Curently we are in the process of upgrading Hockey Community — a social network for hockey players. Find goalies, players, refs, leagues, tournaments, shinny, gear and anything else you need to get started playing hockey — to Vue.js + Nuxt. If you play hockey, give it a try!