javascript - Typescripting custom plugins in Nuxt - Stack Overflow

admin管理员组

文章数量:1410725

In my Nuxt project, I created a custom plugin file that returns an object. /helpers/settings:

export const settings = {
  baseURL: '',
  ...
};

I register this file in /plugins/settings.ts:

import Vue from 'vue';
import { settings } from '~/helpers/settings';

Vue.prototype.$settings = settings;

And in nuxt.config.js:

export default {
  ...
  plugins: [
    '~/plugins/settings',

Then, in a ponent, I can use my plugin like so:

export default Vue.extend({
  data() {
    return {
      url: `${this.$settings.baseURL}/some-path`,

Everything works as expected, except in that in my console, I get a typescript error from the line that I refer to my plugin in my ponent:

Property '$settings' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

Hence my question: what is the proper way to apply a type to my custom plugin so that I don't get this error every time I use it?

In my Nuxt project, I created a custom plugin file that returns an object. /helpers/settings:

export const settings = {
  baseURL: 'https://my-site.',
  ...
};

I register this file in /plugins/settings.ts:

import Vue from 'vue';
import { settings } from '~/helpers/settings';

Vue.prototype.$settings = settings;

And in nuxt.config.js:

export default {
  ...
  plugins: [
    '~/plugins/settings',

Then, in a ponent, I can use my plugin like so:

export default Vue.extend({
  data() {
    return {
      url: `${this.$settings.baseURL}/some-path`,

Everything works as expected, except in that in my console, I get a typescript error from the line that I refer to my plugin in my ponent:

Property '$settings' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

Hence my question: what is the proper way to apply a type to my custom plugin so that I don't get this error every time I use it?

• javascript
• typescript
• vue.js
• plugins
• nuxt.js

Share Improve this question Follow asked Sep 27, 2019 at 19:09 americanknightamericanknight 75933 gold badges1818 silver badges3939 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

According to the docs, you'll need to augment the type file for Vue.

Place the following code in a file named plugin-types.d.ts.

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $settings: string
  }
}

This answer also work but I found an easier, though dirtier, way to fix it without the need of adding the plugin-types.d.ts file.

Just add a property to you ponen with the name of plugin like following:

@Component
export default class YourComponent extends Vue {
  private $settings!: string; // your plugin here
  private url: string = `${this.$settings.baseURL}/some-path`
}

本文标签： javascriptTypescripting custom plugins in NuxtStack Overflow