Skip to content
A template for building custom components that extend Vuetify.
JavaScript TypeScript Vue HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Vuetify Extension Template with TypeScript

This repository contains a template for building Vue.js components that extend components from the Vuetify UI library.

The Reason for this Template

In July 2019, Vuetify released version 2.0 (Arcadia) of a library of UI components that closely implement the Material Design specification. Among many other improvements, Vuetify 2.0 featured a complete rewrite of all its components using TypeScript. TypeScript is a superset of JavaScript that implements a rigorous and robust type-checking system. TypeScript's benefits include:

  • Enhanced code quality and understandability
  • More powerful tooling, allowing things like code completion
  • Type inference, which can help developers catch bugs earlier
  • Access to all of the features of ESNext
  • Ability to compile down to a version of JavaScript that runs in all browsers

Despite these benefits, it is still quite challenging to setup a development environment that makes it easy for developers to build extensions to Vuetify 2.0 components that takes full advantage of the benefits of its TypeScript implementation.

This template was created to make it much easier for developers to build high-quality extensions for Vuetify 2.0 that will benefit the entire extended community of developers who use Vuetify.

Instructions for Use

In order to use this template, you will need to follow the following steps (detailed explanation follows):

  1. Make sure you have accounts with the following entities:
  2. Install yarn
  3. Install global packages with yarn:
  4. Create a new blank repo on GitHub
  5. Download a zipped copy of this repo
  6. Unzip to a local directory on your computer
  7. Rename and/or update the following files:
    • package.json
    • src/
      • index.ts
      • YourComponent.ts
      • YourComponent.sass
      • __tests__/YourComponent.spec.ts
    • dev/
      • index.js
      • App.vue
  8. Install default dependencies with yarn
  9. Initialize a git repository in your customized directory
  10. Make your first commit
  11. Run your first tests
  12. Do your first build
  13. Start the dev server for the first time
  14. Build your extension
  15. Release it!
  16. Publicize, support, and maintain

Questions, Comments, Bug Reports, etc.

Comments, questions, pull requests, and bug reports are very welcome. Please submit an issue via the Issues tab above.

Have fun!

You can’t perform that action at this time.