Boilerplate for Vue.js component on TypeScript

twitter logo ・1 min read

Hi, devs! This post might be interesting to frontend folks, especially to people who are dealing with Vue.js. The title is pretty much self-explanatory, I'd like to share the starter for Vue.js component project I've created recently.

It's packed with tools like:

  • Sass for styling
  • Jest for unit-testing
  • ESLint for linting
  • Rollup for building
  • Storybook for presenting visual components

So, if TypeScript and Vue.js are your things feel free to clone/fork/contribute!

Link to the GitHub repo:

GitHub logo room-js / typescript-vue-component-boilerplate

Boilerplate for creating a custom Vue.js component with TypeScript

Vue.js Component Boilerplate (TypeScript)

This boilerplate uses vue-class-component and vue-property-decorator packages. They allow building Vue components using classes and decorators:

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

@Component
class MyVueComponent extends Vue {
  // component props, methods and lifecycle methods
}

Features

  • Storybook for previewing and building the component - npm run storybook
  • Jest for testing - npm test
  • ESLint for linting - npm run lint

Build package

npm run dist

Build will be placed to ./lib folder and ready to be published on npm registry




twitter logo DISCUSS (2)
markdown guide
 

Thanks for sharing! I love working with Vue(as well as with other frameworks) and I can’t wait for Vue3.

The main reason is due to a better TS support. I’ve had the pleasure of working on a Vue app using ts and it was not the same experience as you get in angular for example.

But still, Vue is a great tool.

 

Yeah, I feel the same about TS support, it might be improved in Vue.js. I hope v3 will integrate better with it. Even considering this, Vue is cool, agree! Thanks for the feedback!

Classic DEV Post from May 28

Those silly mistakes we all make

Silly mistakes happen to us all.

JavaScript Room profile image
Blog about web development