# 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](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Requirements:
- NodeJS: >= v16

## Setup:
```bash
# 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:
```bash
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:
```bash
import { YourElement } from '@/components';
```

#### Components:
```bash
import { YourComponent } from '@/components';
```

#### Then add more lines in `install` hoo to register the component;
```bash
app.component('YourElement', YourElement);
app.component('YourComponent', YourComponent);
```

#### Export the components registered, and run script to build
```bash
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)
```bash
npm install {your_local_components} --no-save
```

### example in my machine;
```bash
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:
```bash
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)
```bash
<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](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## 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)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) 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](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) 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.