na-vue

食用方式

先決條件

pnpm i @nanarino/stylus

---
import stylus from "@nanarino/stylus?url"
---
<html lang="en-HK">
    <head>
        <link rel="stylesheet" href={stylus} />
    </head>
    <body>
        <slot />
    </body>
</html>

若使用 css in js 方式引入，有些打包器（如vite）在構建后纔會將其置於 <head /> 中，開發環境出現 FOUC 問題是正常的

// css in js
import "@nanarino/stylus"

但是初始化明暗的脚本不應該使用 import 引入

<html lang="en-HK">
    <head>
        <script is:inline>
            document.documentElement.dataset["theme"] =
                localStorage.getItem("theme") ??
                ["dark", "light"][
                    +!window.matchMedia?.("(prefers-color-scheme: dark)")?.matches
                ]
        </script>
    </head>
    <body>
        <slot />
    </body>
</html>

套用元件

元件暫時未計劃發佈到 npm ，可以按以下方式安裝, 或者直接拷貝到自己的專案。

// package.json

{
    "dependencies": {
        "@nanarino/vue": "github:nanarino/vue",
    },
    "pnpm": {
        "overrides": {
            "@nanarino/stylus": "$@nanarino/stylus",
        }
    }
}

pnpm update @nanarino/vue

直接從源程式碼引入

<script setup lang="ts">
import Button from "@nanarino/vue/src/lib/Button"
</script>
<template>
    <Button> HOLA </Button>
</template>