DB1 Group - Vuejs Boilerplate

This is an open source MIT project tha has been made to facilitate the development of vuejs applications.

Project stacks:

• Vuejs 2.6.10
• Vuetify 2.1.0
• Typescript 3.6.4
• Pug 2.0.4
• Sass node-sass@4.12.0
• Jest 23.6.0
• Cypress 3.5.0

Features and examples

Class based component

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ExampleComponent extends Vue {}

You can see all the documentation about that in the github project of vue-property-decorator

Creating a route in the component

import { Component, Vue } from 'vue-property-decorator';
import { Route } from '@/services/router-loader/router-loader.decorator';
import ParentComponentIfExists from './path-to/parent-component.vue';

@Route({
  path: '/example-path',
  name: 'example-route',
  parent: ParentComponentIfExists,
})
@Component
export default class ExampleComponent extends Vue {}

Creating an entity

import { Entity, Body, Type } from '@/services/entity/entity.decorator';

@Entity
export class SuperPower {
  @Body()
  public title!: string;

  @Body()
  public description!: string;
}

@Entity
export class Hero {
  @Body()
  public name!: string;

  @Type(SuperPower)
  public superPowers!: SuperPower[];
}

Creating a service

@Service()
export default class HeroService {
  @Get('/heroes')
  public static async getAllHeroes(
    @QueryString() page: number = 1,
    @Response(HeroPagination) response?: Promise<HeroPagination>,
  ) {
    return response;
  }

  @Get('/heroes/:id')
  public static async getHeroById(
    @Param('id') id: string,
    @Response(Hero) response?: Promise<Hero>,
  ) {
    return response;
  }
}

Vuex stores

import { Module, Action, Mutation, VuexModule } from 'vuex-module-decorators';

@Module
export default class LayoutStore extends VuexModule {
  public isDark: boolean = false;

  @Mutation
  public setIsDark(isDark: boolean) {
    this.isDark = isDark;
  }

  @Action({ commit: 'setIsDark' })
  public toggleIsDark(): boolean {
    return !this.isDark;
  }
}

You can see all the documentation about that in the github project of vuex-module-decorators

Autoloaders

This project uses the require.context feature of webpack to load same things like routes and store. The autoloader rules depends of the file name to works, because of this, you need to pay attention in the sufix of file names.

Examples of file names:

• Service: hero.service.ts
• Entity: hero.entity.ts
• Store: hero.store.ts
• Component: for components are 2 rules:
  • Components that contains routes: hero.view.vue
  • Other components: hero.component.vue

Project setup

You can use npm or yarn.

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Run your end-to-end tests

yarn run test:e2e

Run your unit tests

yarn run test:unit