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:
-
Sassfor styling -
Jestfor unit-testing -
ESLintfor linting -
Rollupfor building -
Storybookfor presenting visual components
So, if TypeScript and Vue.js are your things feel free to clone/fork/contribute!
Link to the GitHub repo:
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
-
Storybookfor previewing and building the component -npm run storybook -
Jestfor testing -npm test -
ESLintfor linting -npm run lint
Build package
npm run dist
Build will be placed to ./lib folder and ready to be published on npm registry
Top comments (2)
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!