Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Requirements:

• NodeJS: >= v16

Setup:

# install dependencies
$ npm install

# serve with hot reload at localhost:5173
$ npm run dev

# run the storybook at localhost:6066
$ npm run storybook

# build the library
$ npm run build

Project structure:

• src
  • assets include icons, scss, fonts using in components
  • components write your components in here
    • elements include the basic element based on HTML (select, input, table, ....)
    • components include components (SVG-render, BillingCard,...)
  • constants definde the constants
  • directives list your custom vue-directive
  • examples list your example that using our components
  • stories list the stories of the components that are rendered with Storybook

======================================================================================================================================================

======================================================================================================================================================

How to write the component/element and export it in our librar

1. Create your file in components/elements:

src/components/elements/your-element.vue elements/components/your-component.vue

2. Add export your component in src/components/index.ts:

export { default as YourElement } from './elements/your-elements.vue'
export { default as YourComponent } from './your-component.vue'

3. Install your component and export with our library in src/components/main.ts:

Elements:

import { YourElement } from '@/components';

Components:

import { YourComponent } from '@/components';

Then add more lines in install hoo to register the component;

app.component('YourElement', YourElement);
app.component('YourComponent', YourComponent);

Export the components registered, and run script to build

export { YourElement, YourComponent }
$ npm run build

*** Check more detail in src/components/main.ts ***

=====================================================================================================================================================

=====================================================================================================================================================

How to use our component in other project:

Install our component in other project (using local-link)

npm install {your_local_components} --no-save

example in my machine;

npm install /Users/bipham/Documents/Workspace/tessereum/arbo-ui-components --no-save

* We add the option --no-save to prevent npm update the package.json file

Import the css and directives in src/main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
import i18n from "@/plugins/i18n";

// Import css and directive of our component
import "arbo-ui-components/styles.css"
import { clickOutside } from 'arbo-ui-components'
const myApp = createApp(App)
myApp.use(i18n)

myApp.use(router)

// Register our directives
myApp.directive('click-outside', clickOutside);
// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')

Import our component in your vue files then use; (example: src/views/example.vue)

<template lang="pug">
.example-section
    ...
      arbo-banner
      arbo-button
      arbo-modal
</template>
<script setup lang="ts">
import { ArboButton, ArboBanner, ArboModal } from 'arbo-ui-components'
...

=====================================================================================================================================================

=====================================================================================================================================================

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.