Bruk av designsystemet i Vue 3

Installer designsystem-pakka

npm i nve-designsystem

Fortell Vue at komponentene våre er web-komponenter

I vite.config, legg inn isCustomElement, som forteller Vue hva som er web-komponenter. Hvis du ikke har vite.config fra før, lag en ny fil i rot-mappa.

Les her for mer info og andre løsninger hvis du ikke bruker Vite.

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('nve-'),
        },
      },
    }),
  ],
});

Stiler

Importer én .css-fil for fargetema i main.ts. Filene finnes i mappa nve-designsystem/css/. For NVE-tema, bruk:

import 'nve-designsystem/css/nve.css';

For Varsom-tema, bruk:

import 'nve-designsystem/css/varsom.css';

For RME-tema, bruk

import 'nve-designsystem/css/rme.css';

Det finnes også varianter av disse to filene med mørkt tema.

Ikoner

Fordi vi overstyrer Shoelace sine system-ikoner må vi registrere disse manuelt. Her er mer informasjon om Shoelace sitt ikonbibliotek. Legg denne kodesnutten i main.ts eller App.vue:

import { icons, registerIconLibrary } from 'nve-designsystem/registerIcons/systemLibraryCustomization.js';
registerIconLibrary('system', {
  resolver: (name) => {
    return `data:image/svg+xml, ${encodeURIComponent(icons[name])}`;
  },
});

Eslint-regler og Visual Studio Code

Hvis du bruker Visual Studio Code og starter et nytt prosjekt gjennom npm run create vue@latest og bruker standard eslint-regler, kan du få feil og automatisk retting. For å unngå dette, legg til følgende i din eslint.config:

json

"vue/no-deprecated-slot-attribute": "off",
"vue/attribute-hyphenation": "off",
"vue/v-on-event-hyphenation": "off",

Eksempel på bruk av komponent

vue

<template>
  <nve-button @Click="count++">Du har trykket på denne NVE-knappen {{ count }} gang(er)</nve-button>
</template>
<script setup lang="ts">
import 'nve-designsystem/components/nve-button/nve-button.component.js';
import { ref } from 'vue';
const count = ref(0);
</script>

Under kjører vi denne koden i en sandkasse. Du kan endre koden selv ved å velge 'Open Sandbox' og fila 'App.vue'.

Hvis du ikke ser komponenten når du kjører sida, sjekk om du har importert den riktig.

Les også om bruk av Shoelace-komponenter i Vue. Det meste der gjelder for Nve-komponenter også.

Mer hjelp i Visual Studio Code

Vi bruker Custom Element VS Code Integration til å generere hjelpedokumentasjon.

Legg denne inn i .vscode/settings.json for å få dokumentasjon og autofullføring av attributt-verdier i Visual Studio Code:

json

"html.customData": ["./node_modules/nve-designsystem/vscode.html-custom-data.json"],
"css.customData": ["./node_modules/nve-designsystem/vscode.css-custom-data.json"]

Da får du disse funksjonene:

Hold muspeker over komponentnavnet i html-malen for å se dokumentasjon på komponenten
Bruk Ctrl-space for hjelp til å fullføre attributtnavn og for å vise tilgjengelige valg der et attributt har et begrenset sett av lovlige valg.

For utviklere

Bruk av designsystemet i Vue 3 ​

Installer designsystem-pakka ​

Fortell Vue at komponentene våre er web-komponenter ​

Stiler ​

Ikoner ​

Eslint-regler og Visual Studio Code ​

Eksempel på bruk av komponent ​

Mer hjelp i Visual Studio Code ​