npm package: @gatship/gs-components-3
Description: GAT-Ship Vue 3 components
Latest version: 0.0.84

# gs-components-3

Vue 3 component library

<b>NB:<b> If you are cloning this repository, please follow the guidelines for cloning at the bottom.

## Recommended IDE Setup

[VSCode](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.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Adding the plugin to a new project

1. Init a project with vuetify and gs-components:
   Open your terminal and navigate to the folder where you want to create your new project.
   Then write the following commands in your terminal, this will scaffold a new vue project using vuetify + vite. Make sure that you opt in for Typescript since the gs-components package requires it.

```sh
1. npm create vuetify
2. cd -your-project-name-
3. npm i @gatship/gs-components-3
4. npm i -D sass
5. npm i iso-3166-1
6. code .
```

2. Follow "Adding the plugin exsisting project" steps.

## Adding the plugin exsisting project

1. Create the plugin with options in seperate file:

src/plugins/gs-components.ts

```ts
import { createGatComponents } from '@gatship/gs-components-3';

export default createGatComponents(/* global config options */);
```

2. Add plugin to the project.

src/plugins/index.ts

```ts
// Plugins
import { loadFonts } from './webfontloader';
import vuetify from './vuetify';
import router from '../router';
import pinia from '../store';
import gatComponents from './gs-components';
// Types
import type { App } from 'vue';

export function registerPlugins(app: App) {
  loadFonts();
  // load all your plugins here
  app.use(vuetify).use(router).use(pinia).use(gatComponents); // .use(router) etc.
}
```

3. Load the plugins in main.ts

src/main.ts

```ts
// Components
import App from './App.vue';

// Composables
import { createApp } from 'vue';

// Plugins
import { registerPlugins } from '@/plugins';

const app = createApp(App);

registerPlugins(app);

app.mount('#app');
```

4. Edit the vite.config.ts file (optimizeDeps -> numeral, iso-3166-1):
   For some reason the commonJs libraries numeralJS & iso-3166- will not be correctly initialized by vite on project-startup.
   Therefore we need to tell vite to always initialize the numeral & iso-3166-1 libraries.

```ts
export default defineConfig({
  // Add this property to your vite config.
  optimizeDeps: {
    include: ['numeral', 'iso-3166-1'],
  },
  // ... plugins etc.
});
```

5. npm run dev (if you just cloned this repository, follow the 'Cloning this repository' guide):
   The gs-components plugin should now be installed to your project. The browser console will print out 'gat-components loaded' on project-init.
   Happy coding!

## Cloning this repository

This repository is using the submodule gs-components-3 (https://dev.azure.com/gatship/gs-components/_git/gs-components-3)
This means that when you are cloning this repository you need to make sure that the submodule is initialized, updated and set to main/origin.

Run these commands in your terminal at the root of the gs-components3-docs project:

1. git submodule init
2. git submodule update
3. cd submodule_dir
4. git checkout master
5. cd ../