npmpackage.info

Gathering detailed insights and metrics for @utrecht/component-library-vue

Other packages similar to @utrecht/component-library-vue

@utrecht/web-component-library-vue

2.1.7

Vue.js web components for the Municipality of Utrecht based on the NL Design System architecture

Gathering detailed insights and metrics for @utrecht/component-library-vue

@utrecht/component-library-vue - 2.3.0 | npmpackage.info

@utrecht/component-library-vue

Work in Progress: Utrecht Design System based on the NL Design System architecture. Storybook: https://nl-design-system.github.io/utrecht/storybook/

2.3.0

EUPL-1.2

TypeScript

404.83 kB

5.7

Installations

npm install @utrecht/component-library-vue

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.13.1

NPM Version

10.9.2 Pull Requests

Open

92

Total

2,564

Closed

1,180

Merged

1,292

Issues

Open

243

Total

289

Closed

46

Releases

925

@utrecht/component-library-css@7.3.0

Updated on Jun 18, 2025

@utrecht/design-tokens@3.3.0

Updated on Jun 18, 2025

@utrecht/tooltip-react@1.0.0

Updated on Jun 18, 2025

@utrecht/tooltip-css@1.0.0

Updated on Jun 18, 2025

@utrecht/component-library-vue@2.3.1

Updated on Jun 16, 2025

@utrecht/design-tokens@3.2.0

Updated on May 27, 2025

View All 925 releases

Languages

TypeScript

SCSS

HTML

JavaScript

MDX

CSS

Vue

Shell

TypeScript (73.02%)

SCSS (12.42%)

HTML (5.82%)

JavaScript (4.42%)

MDX (2.33%)

CSS (1.14%)

Vue (0.84%)

Developer

nl-design-system

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

EUPL-1.2 License

29 Stars

3,715 Commits

23 Forks

7 Watchers

258 Branches

48 Contributors

Updated on Jun 28, 2025

Maintainers

View All 48 Contributors

Package Meta Information

Latest Version

2.3.0

Package Id

@utrecht/component-library-vue@2.3.0

Unpacked Size

404.83 kB

Size

46.83 kB

File Count

NPM Version

10.9.2

Node Version

22.13.1

Published on

Feb 17, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@babel/core @rushstack/eslint-patch @testing-library/jest-dom @testing-library/vue @types/jest @types/jsdom @types/node @types/testing-library__jest-dom @vitejs/plugin-vue @vue/compiler-sfc @vue/test-utils @vue/tsconfig @vue/vue3-jest babel-jest jest jest-environment-jsdom jsdom prettier rimraf sass ts-jest typescript vite vite-plugin-dts vue vue-router vue-tsc @utrecht/alert-dialog-css @utrecht/article-css @utrecht/badge-counter-css @utrecht/badge-status-css @utrecht/breadcrumb-nav-css @utrecht/button-css @utrecht/button-group-css @utrecht/code-block-css @utrecht/checkbox-css @utrecht/data-list-css @utrecht/document-css @utrecht/code-css @utrecht/custom-checkbox-css @utrecht/emphasis-css @utrecht/form-field-css @utrecht/form-label-css @utrecht/form-fieldset-css @utrecht/heading-2-css @utrecht/figure-css @utrecht/heading-1-css @utrecht/heading-4-css @utrecht/heading-5-css @utrecht/heading-6-css @utrecht/heading-3-css @utrecht/heading-css @utrecht/link-css @utrecht/html-content-css @utrecht/link-social-css @utrecht/list-social-css @utrecht/number-badge-css @utrecht/number-data-css @utrecht/ordered-list-css @utrecht/page-content-css @utrecht/page-css @utrecht/page-footer-css @utrecht/page-header-css @utrecht/paragraph-css @utrecht/radio-button-css @utrecht/select-css @utrecht/separator-css @utrecht/skip-link-css @utrecht/textarea-css @utrecht/table-css @utrecht/textbox-css @utrecht/unordered-list-css @utrecht/url-data-css

Component library for Vue apps

The @utrecht/component-library-vue package contains Vue implementations of various components. You can use this package in Vue apps, both client side and server side, to render the right HTML elements with the Utrecht design system class names.

The CSS components that implement the Utrecht design system class names are published in a separate npm package, so don't forget to install and include @utrecht/component-library-css too for the styling of the white-label components, as well as a package with design tokens for your theme.

Stability of the components

The Vue components are released as alpha version, which means the components are still work in progress and it is likely that some APIs will between releases.

Make sure you specify the exact version as dependency, so you can schedule to upgrade to the latest version when you have time to test for regression bugs.

Vue Component or Vue Web Component?

We currently have two packages with Vue components, and you might wonder which to choose. Our Web Components are still experimental and since the Shadow DOM prevents you from simply extending the CSS implementation, you wouldn't be able to easily tweak it to your needs. Therefore we suggest using the Vue components when they are available.

In the future this advice might change since some components could be released exclusively as Web Component while others will remain available as CSS component with Vue wrapper only.

Getting started

1npm install --save-dev --save-exact @utrecht/component-library-vue

With this package available, you can render any component from the library in your page. For example:

1<script setup lang="ts">
2import { Document, Heading1 } from "@utrecht/component-library-vue";
3</script>
4
5<template>
6  <!-- Class name to apply the design tokens from the theme -->
7  <Document class="utrecht-theme">
8    <Heading1>Page styled with NL Design System</Heading1>
9  </Document>
10</template>
11
12<!--Package with Utrecht design tokens for the white-label components
13Substitute with your another theme for other organisations. -->
14<style src="@utrecht/design-tokens/dist/index.css"></style>
15
16<style src="@utrecht/component-library-vue/dist/style.css"></style>

Components overview

We make components for Vue available when needed in a project. Not every component is available yet, and we welcome you to discuss contributions.

Currently the following components are available:

1import {
2  Article,
3  BadgeStatus,
4  Button,
5  ButtonGroup,
6  Checkbox,
7  Document,
8  FormField,
9  FormFieldset,
10  FormFieldsetLegend,
11  FormLabel,
12  Heading,
13  Heading1,
14  Heading2,
15  Heading3,
16  Heading4,
17  Heading5,
18  Heading6,
19  Link,
20  Paragraph,
21  Page,
22  PageContent,
23  PageFooter,
24  PageHeader,
25  RadioButton,
26  Select,
27  SelectOption,
28  Textbox,
29  Textarea,
30} from "@utrecht/component-library-vue";

Contributing

When a project needs a component from the design system that already exists as CSS component with an HTML example, they will create a Vue component for it internally. Projects that have new Vue components can let the design system team know and create a pull request to include it in this component library. No

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

5

SAST

Determines if the project uses static code analysis.

4

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

83 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-593m-55hh-j8gv
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf
Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674
Warn: Project is vulnerable to: GHSA-vhxf-7vqr-mrjg
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-f7f6-9jq7-3rqj
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-44fp-w29j-9vj5
Warn: Project is vulnerable to: GHSA-4pg4-qvpc-4q3h
Warn: Project is vulnerable to: GHSA-g5hg-p3ph-g8qg
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-gp8f-8m3g-qvj9
Warn: Project is vulnerable to: GHSA-7m27-7ghc-44w9
Warn: Project is vulnerable to: GHSA-f82v-jwr5-mffw
Warn: Project is vulnerable to: GHSA-fr5h-rqp8-mj6g
Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4
Warn: Project is vulnerable to: GHSA-3h52-269p-cp9r
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-wgrm-67xf-hhpq
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-pqhp-25j4-6hq9
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-3787-6prv-h9w3
Warn: Project is vulnerable to: GHSA-9f24-jqhm-jfcw
Warn: Project is vulnerable to: GHSA-9qxr-qj54-h672
Warn: Project is vulnerable to: GHSA-m4v8-wqvr-p9f7
Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
Warn: Project is vulnerable to: GHSA-cxrh-j4jr-qwg3
Warn: Project is vulnerable to: GHSA-rcw3-wmx7-cphr
Warn: Project is vulnerable to: GHSA-963h-3v39-3pqf
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

5.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More