# @gatship/gs-components-3

> GAT-Ship Vue 3 components

Latest version **0.0.84** (published 2023-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gatship/gs-components-3
pnpm add @gatship/gs-components-3
yarn add @gatship/gs-components-3
bun add @gatship/gs-components-3
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.84 |
| Published | 2023-09-08 |
| First published | 2023-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 24 |
| Unpacked size | 884.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | kjetilgatship, omchapagain, frgr91, mike-gatship |

## Links

- npm: https://www.npmjs.com/package/@gatship/gs-components-3
- npm.io page: https://npm.io/package/@gatship/gs-components-3

## Dependencies (24)

- [vue](https://npm.io/package/vue.md) ^3.3.0-beta.3
- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [luxon](https://npm.io/package/luxon.md) ^3.0.3
- [pinia](https://npm.io/package/pinia.md) ^2.0.35
- [moment](https://npm.io/package/moment.md) ^2.29.4
- [numeral](https://npm.io/package/numeral.md) ^2.0.6
- [vuetify](https://npm.io/package/vuetify.md) 3.2.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.1.0
- [@mdi/font](https://npm.io/package/@mdi/font.md) 7.1.96
- [codemirror](https://npm.io/package/codemirror.md) ^6.0.1
- [iso-3166-1](https://npm.io/package/iso-3166-1.md) ^2.1.1
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.6
- [@types/node](https://npm.io/package/@types/node.md) ^16.11.68
- [@types/uuid](https://npm.io/package/@types/uuid.md) ^9.0.0
- [@types/luxon](https://npm.io/package/@types/luxon.md) ^3.1.0
- [concurrently](https://npm.io/package/concurrently.md) ^7.6.0
- [webfontloader](https://npm.io/package/webfontloader.md) ^1.0.0
- [@types/numeral](https://npm.io/package/@types/numeral.md) ^2.0.2
- [vue-codemirror](https://npm.io/package/vue-codemirror.md) ^6.1.1
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) *
- [awesome-phonenumber](https://npm.io/package/awesome-phonenumber.md) ^5.1.0
- [vue-country-flag-next](https://npm.io/package/vue-country-flag-next.md) ^2.3.2
- [@codemirror/theme-one-dark](https://npm.io/package/@codemirror/theme-one-dark.md) ^6.1.0
- [@codemirror/lang-javascript](https://npm.io/package/@codemirror/lang-javascript.md) ^6.1.2

## Recent versions

- 0.0.84 (latest) — 2023-09-08
- 0.0.83 — 2023-05-03
- 0.0.82 — 2023-05-03
- 0.0.81 — 2023-05-02
- 0.0.80 — 2023-05-02
- 0.0.79 — 2023-05-02
- 0.0.78 — 2023-05-02
- 0.0.77 — 2023-05-02
- 0.0.76 — 2023-04-27
- 0.0.75 — 2023-04-27
- 0.0.74 — 2023-04-27
- 0.0.73 — 2023-04-26
- 0.0.72 — 2023-04-24
- 0.0.71 — 2023-04-19
- 0.0.70 — 2023-04-19
- … 69 more at https://npm.io/package/@gatship/gs-components-3/versions

## README

# 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 ../

---
_Source: https://npm.io/package/@gatship/gs-components-3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._