デジタル庁デザインシステム Vue.js

デジタル庁が公開しているデザインシステムをVue.jsで実装したものです。各コンポーネントはStorybookで紹介しています。

現在、ダークモードのカラースキームは対応していません。

propsなどはDocsに記載しています。modelValuepropsおよびupdate:modelValueはコンポーネントのv-modelで利用できます。

必要動作環境

Vue 3.4以上

インストール

npm install digital-agency-design-system-vue

使い方

インストール後、CSSのスタイルを読み込む必要があります。digital-agency-design-system-vue/style.cssとして公開していますので、任意の方法でCSSファイルを読み込んでください。Viteを使っている場合下記コードで読み込めます。

import "digital-agency-design-system-vue/style.css"

コンポーネントの使用方法

コンポーネントは下記のようにインポートできます。

import { BasicButton } from "digital-agency-design-system-vue"

コンポーネントのPropsや使い方についてはStorybookをご確認ください。

デザインのライセンスに関する表記

Copyright Digital Agency, Government of Japan 2023. Licensed under CC by 4.0