nuxt-ioc

# Component decorators

nuxt-ioc comes with several helpful syntactic sugar decorators, that will help keeping your code uniform and clean. Those conventions are optional, but we do recommend using them.

# @Components decorator

Components decorator is created to inject component dependencies (.vue files). This is a known pattern and uses the exact same syntax as default Vue options:

import { Injectable, Components, BaseComponent } from 'nuxt-ioc';
import MyOtherComponent from './MyOtherComponent.vue';

@Injectable()
@Components({
  MyOtherComponent,
})
export class MyComponent extends BaseComponent {}
1
2
3
4
5
6
7
8

The syntax is identical to to component local registration

TIP

This decorator is not required if you do not have component dependencies. Just do not include it when you do not need it.

# @Prop decorator

Prop decorator is responsible for handling component props passing. You can use it to take a vue prop into a class property.

mport { Injectable, Prop, BaseComponent } from 'nuxt-ioc';

@Injectable()
export class MyComponent extends BaseComponent {
  @Prop()
  private myProp: string;
}
1
2
3
4
5
6
7

For more advanced usage you can pass options to the decorator. It takes options of type PropOptions from Vue.js.

import { Injectable, Prop, BaseComponent } from 'nuxt-ioc';

interface IMyProp {
  test: number;
}

@Injectable()
export class MyComponent extends BaseComponent {
  @Prop({
    type: Object,
    default: () => ({
      test: 1;
    }),
  })
  private myProp: IMyProp;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

For @Prop options you can refer to Vue.js documentation on Props

# @Ref decorator

Reference decorator can be used to make a shortcut for vue $refs property.

If you create a reference to an DOM element (see vue docs) normally its available at this.$refs.<name>.

As nuxt-ioc adds own layer for vue props (this.$vue) accessing refs could be annoying and would look like this:

this.$vue.$refs.myRef;
1

To simplify this process you can use @Ref decorator.

<template>
  <div>
    <img ref="catPhoto" src="https://placekitten.com/200/300" alt="Cute cats" />
  </div>
</template>
<script lang="ts">
import { Injectable, Ref, BaseComponent } from 'nuxt-ioc';

@Injectable()
export class MyComponent extends BaseComponent {
  @Ref('catPhoto')
  private catPhoto: HTMLElement;

  public $mounted(): void {
    console.log(this.catPhoto); // => shows <img ref="catPhoto" src="https://placekitten.com/200/300" alt="Cute cats" />
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# @Watch decorator

Vue.js allows to watch component data using the watch: {} option. For more object-oriented approach you can use @Watch decorator for this

import { Injectable, Watch, BaseComponent } from 'nuxt-ioc';

@Injectable()
export class MyComponent extends BaseComponent {
  @Watch('someVariable', { deep: true, immediate: false })
  public onSomeChange() {
    console.log('value has changed');
  }

  @Watch('otherVariable')
  public onOtherChange() {
    console.log('value has changed');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Options

Option name type required default value
propertyName String yes none
options WatchOptions no {}

# @Meta decorator

This decorator helps working with great vue-meta package. It allows you to decorate a class method with @Meta which will automatically pass correct information to the vue-meta package.

import { Injectable, Meta, BaseComponent } from 'nuxt-ioc';

@Injectable()
export class MyComponent extends BaseComponent {
  @Meta()
  public getMeta() {
    return {
      title: 'Default Title',
      titleTemplate: '%s | My Awesome Webapp',
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

For info about options that you can pass here refer to vue-meta documentation

# @RouterParam decorator

This decorator returns router param which is avaiable in this.$route.params.<name>.

import { Injectable, RouterParam, BaseComponent } from 'nuxt-ioc';

@Injectable()
export class MyComponent extends BaseComponent {
  @RouterParam('id')
  private articleUuid: string;

  public $mounted() {
    console.log(`Router param id is: ${this.articleUuid}`);
  }
}
1
2
3
4
5
6
7
8
9
10
11

If your route is configured like this:

const router = new VueRouter({
  routes: [{ path: '/article/:id', component: Article }],
});
1
2
3

This will get the id param to class property that you decorated.

Entering to /article/ab6kqp1 property articleUuid will contain ab6kqp1 string;

More information about routing can be found on Vue-router documentation.

# @RouterQuery decorator

@RouterQuery works very similar as @RouterParam but returns query params instead of route params.

import { Injectable, RouterQuery, BaseComponent } from 'nuxt-ioc';

@Injectable()
export class MyComponent extends BaseComponent {
  @RouterQuery('page')
  private page: string;

  public $mounted() {
    console.log(`Current page is: ${this.page}`);
  }
}
1
2
3
4
5
6
7
8
9
10
11

If you enter /article/abc?page=2 property page will be filled with query value, which in this case is 2.

← DDD Structure →