@riftgg/vue v1.0.6

Introduccion

To use this library it is recommended to work with a project using Vue Cli 3 with TypeScript:

When the project has been installed we will install:

npm install @riftgg/vue -D

And set VueRift in your project:

import Vue from 'vue';
import VueRift from '@riftgg/vue';

Vue.use(VueRift);

We will create the file vue.config.js in the root and add the configuration to compile the html files.

Usage

With this library we have tried to offer certain utilities to projects that work with Vue + TypeScript.

Components

@Component() It is an extension @Component of vue-property-decorator, but in this case will allow us to create an html tag for our component so we can call our component from any html without having to put the name of the class. In this decorator we will have several configuration options:

Create hello.component.ts:

import { Component } from '@riftgg/vue';

@Component({
    selector: 'rft-hello',
    withRender: '@/hello.component',
})

export class HelloComponent {}

And we can use this component in this way:

import { Component } from '@riftgg/vue';

import { HelloComponent } from './hello.component';

@Component({
    withRender: '@/home.component',
    declarations: [
        HelloComponent,
    ],
})

export class HomeComponent {}

And in the html:

<div>
    <h1>Home</h1>
    <rft-hello />
</div>

Injectors

@Injectable() is the decorator that will allow us to use our provider in any of our components where it is initialized.

In the file hello.service.ts we will create our injector:

import { Injectable } from '@riftgg/vue';

@Injectable({
  name: 'helloService'
})

export class HelloService {
    public say() {
        console.info('hello world');
    }
}

After having initialized said injector we will have to use it in a component

import { Component, Provider } from '@riftgg/vue';

import { HelloService } from './hello.service';

@Component({
    selector: 'rft-hello',
    withRender: '@/hello.component',
    providers: [
        HelloService,
    ],
})

export class HelloComponent {
    @Provider('helloService') private readonly service: any;
    
    public mounted(): void {
        this.service.say(); // hello world
    }
}

It is important to use the correct name with the decorator @Provide, if the name of the class is HelloService the name of the provide is helloService.

Pipes

@Pipe() is the decorator that will allow us to create vue filters.

In the file capitalize.pipe.ts you create our filter:

import { Pipe, IPipe } from '@riftgg/vue';

@Pipe({
    name: 'capitalize',
})

export class CapitalizePipe implements IPipe {
    public action(word: string): string {
        // ...
    }
}

And to use this filter should be defined in the decorator @Component(), in such a way:

import { Component } from '@riftgg/vue';

import { CapitalizePipe } from './capitealize.pipe';

@Component({
    selector: 'rft-hello',
    withRender: '@/hello.component',
    declarations: [
        CapitalizePipe,
    ],
})

export class HelloComponent {}

And in the Html:

<div>
    <span>{{ 'hello' | capitalize }}</span>
</div>

Directives

@Directive() is the decorator that will allow us to create attributes with certain concrete action.

In the file hello.directive.ts:

import { Directive, IDirective } from '@riftgg/vue';

@Directive({
    selector: 'hello',
})

export class HelloDirective implement IDirective {
    public inserted(el: HTMLElement, node: any): void {
        // ...
    }
}

And we will use it in such a way:

import { Component } from '@riftgg/vue';

import { HelloDirective } from './hello.directive';

@Component({
    selector: 'rft-hello',
    withRender: '@/hello.component',
    declarations: [
        HelloDirective,
    ],
})

export class HelloComponent {}

And in the Html:

<div>
    <span v-hello>hello</span>
</div>