DEV Community

loading...
Cover image for Boilerplate for Vue.js component on TypeScript

Boilerplate for Vue.js component on TypeScript

room_js profile image JavaScript Room ・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




Discussion

pic
Editor guide
Collapse
anduser96 profile image
Andrei Gatej

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.

Collapse
room_js profile image
JavaScript Room Author

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!