Nuxtjs using typescript has problem with using meta

Question

In Nuxt.js I put my permissionKeys of the page so that I could check user's access in the middleware. When my script language is JS everything works like a charm, however, in the case of lang="ts" I face errors.

I've looked for the solution and using vue-meta package, but i ended up getting the same error.

<script lang="ts">
export default {
  meta: {
    authorization: ['Organization/List']
  },
  data() {
    return {
           text: this.$t('organization.title'),
    }
   }
}

in this case I face this error:

Property '$t' does not exist on type '{ meta: { authorization: string[]; }; data(): any; }'.

I don't know what is the problem of using meta and global varaibles.

user11537130 · Accepted Answer · 2019-09-01 11:58:05Z

1

You can achieve this by using the nuxt-property-decorator this refer to the head property I'm not sure if this suits your need with plugin vue-meta but you can refer to the link given below about creating decorator to set vue-meta package

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  layout: 'home',
  head() {
    return {
      title: 'Test Title',
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
})
export default class MainPage extends Vue {

}
</script>

or create your own decorator so that you can define it inside the class

@Meta

https://github.com/nuxt/vue-meta/issues/181#issuecomment-390258209

@Update 1/9/2019

You can use extendRoutes, this isn't advisable but still works :)

create permissions.js and inside it, it looks like this

export const normalUser = [
  'route-name-invoices',
  'route-name-invoices-create'
];

in your nuxt.config.js - import your permission js

import { normalUser } from './permissions'

...
// find the router or you can define it
router: {
  extendRoutes(routes) {
    return routes.map(route => {
      if (normalUser.includes(route.name)) {
        route.meta = { authorization: ['Organization/list'] };
      }
      return route;
    });
  }
}

edited Sep 1, 2019 at 11:58

answered Aug 5, 2019 at 8:27

user11537130

3064 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Narges Moemenyan Over a year ago

it is possible to set meta without using decorator. By the way, with or without decorator, i cannot get meta properties in the middleware as follows: route.meta.forEach(item => { if (item.authorization && typeof item.authorization !== undefined) { } })

user11537130 Over a year ago

okay I think you're referring to the router meta. in this case you can use the extendRoutes but this solution maybe long, but it's working enough for the this.$t you must inject it the vue instances link or use a ts ignore [code]// @ts-ignore [/code] above the this.$t

Narges Moemenyan Over a year ago

Yes, I meant like this: (router.vuejs.org/guide/advanced/meta.html). However, in Nuxt, routes would generated based on folders convention. in Nuxt without ts this meta can be added in the component without any problem, but the issue would raise when I use ts : <script lang="ts"> import Vue from 'vue' export default Vue.extend({}) I tried everything in the past days and ended up using beforeRouteEnter in the component. export default Vue.extend({ beforeRouteEnter(to, from, next) {} but in case of lacking access, it seems to enter the page for a few seconds.

Aluan Haddad · Accepted Answer · 2019-07-24 12:55:01Z

0

By using <type="ts"> we are invoking TypeScript typechecking. Now lets break the code down to see why the error is legitimate.

const obj = {
  meta: {
    authorization: ['Organization/List']
  },
  data() {
    return {
           text: this.$t('organization.title'),
    }
   }
};

export default obj;

Now, in the data method, this refers to the object obj and we reference the property $t of this, of obj. Clearly there is no such property.

answered Jul 24, 2019 at 12:55

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

3 Comments

Narges Moemenyan Over a year ago

I see what you are saying. But, I guess Vue works with ts a little bit more complicated. Because without "meta" it works. Moreover, $t is a function of i18n which is known all over the project because it is injected.

Aluan Haddad Over a year ago

You are saying {data() { return this.$t(''); }} isn't a type check error?

Narges Moemenyan Over a year ago

No, it's not. please refer to the vuejs and typescript documents and you'll see this works. In fact, in my question, there is a problem with meta not this.$t

Narges Moemenyan · Accepted Answer · 2019-10-03 17:14:09Z

0

It seems that the definition of meta key in route was added recently: https://github.com/nuxt/typescript/pull/89

answered Oct 3, 2019 at 17:14

Narges Moemenyan

1454 silver badges18 bronze badges

Collectives™ on Stack Overflow

Nuxtjs using typescript has problem with using meta

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related