gs-components-3

Vue 3 component library

NB: If you are cloning this repository, please follow the guidelines for cloning at the bottom.

Recommended IDE Setup

VSCode + 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.

Customize configuration

See Vite Configuration Reference.

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.

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

import { createGatComponents } from '@gatship/gs-components-3';

export default createGatComponents(/* global config options */);

2. Add plugin to the project.

src/plugins/index.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

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

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