@oslokommune/punkt-vue

Bruk av punkt-vue

Dette repoet inneholder Punkt sine UI-komponenter for Vue 3. Komponentene er laget for å fungere sammen med @oslokommune/punkt-assets og @oslokommune/punkt-css. Dersom vi har komponenter som ikke eksisterer i Vue, kan man ta i bruk komponenter fra @oslokommune/punkt-elements i Vue.

📝 Forutsetninger

Peer dependencies:

• nodejs >= 22.19.0
• vue >= 3.0.0
• @oslokommune/punkt-assets >= 1.0
• @oslokommune/punkt-css >= 1.0

🚀 Kom i gang - npm

1. Installer komponentbiblioteket

npm add @oslokommune/punkt-vue

2. Importer komponentene

/* src/main.js

Velg å installere hele bundlen */
import { createApp } from 'vue'
import PktVue from '@oslokommune/punkt-vue'

const app = createApp({})

app.use(PktVue)

/* eller kun individuelle komponenter (med ikoner)*/
import { createApp } from 'vue'
import { PktHeader, PktFooter, PktIcon } from '@oslokommune/punkt-vue'

const app = createApp({})

app.component('pkt-header', PktHeader)
app.component('pkt-footer', PktFooter)
app.component('pkt-icon', PktIcon)

🟪 Ikoner

Alle våre komponenter bruker PktIcon-komponenten for å importere ikonene via vår CDN.

Om du har en content security policy(CSP) satt opp må du åpne for https://punkt-cdn.oslo.kommune.no/ i din CSP.

Les mer om ikoner her.

🔵 Bruk av punkt-elements

En del komponenter i punkt-vue-pakken tar i bruk elementer fra punkt-elements-pakken. Det skal i all hovedsak fungere veldig bra, men dersom dere skulle oppleve utfordringer med reaktive objekter eller verdier i slots, så kan det hjelpe å pakke innholdet i slots i en div eller annet wrapper-element. OG dersom dette skulle oppstå, ta gjerne kontakt med Punkt-teamet så vi kan feilsøke og forbedre koden vår!

Vi utvikler i dag ikke nye komponenter i Vue, så om dere ser komponenter dere ønsker å bruke i Vue som ikke eksisterer i punkt-vue-pakken, så kan dere bruke elementene fra punkt-elements-pakken som om de skulle vært Vue-komponenter.

🧩 Komponentbiblioteket

For beskrivelse av hvordan ta i bruk hver enkelt komponent se om komponenter.

🔢 Versjonering

Punkt bruker Semantic Versioning 2.0.0 for versjonering av pakkene.

👮 Lisens

Punkt er distribuert under MIT-lisens for åpen kildekode.