Vue 3 project template

This template includes :

• Vue 3
• Vuetify 3
• Typescript
• ESlint
• npm packaging configuration
• vitest
• storybook

Files to modify for the npm packaging

This template is configured to build and publish an npm package on GitLab, following this tutorial.

Replace 'ComponentExample' with the name of the component to publish in these files :

• lib/main.js
• package.json
• vite.config.ts

The package will be published with the GitLab CI.

Use the package in another project

npm i -D @metabohub/component-example

If your project is not using vuetify, you need to import it in src/main.ts :

import { createApp } from 'vue'
import App from './App.vue'
import { vuetify } from "@metabohub/component-example";

createApp(App).use(vuetify).mount('#app')

Use the component :

<script setup lang="ts">
import { ComponentExample } from "@metabohub/component-example";
import "@metabohub/component-example/dist/style.css";
import type { SomeType } from "@metabohub/component-example";
</script>

<template>
  <ComponentExample />
</template>

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-check

npm run type-check

Compile for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Check the coverage :

npm run coverage

Lint with ESLint

npm run lint

View stories with Storybook

npm run storybook