Nuxt3 で Material3 コンポーネントを使うには、Google 公式が提供している素の状態の material-web パッケージを使用して、Nuxt3 に組み込む。
以下、material-web の各種ドキュメント。
- Material Design 3 の公式ページ
https://m3.material.io/ - Material Web のリファレンスページ
https://material-web.dev/ - Material Web の GitHub
https://github.com/material-components/material-web - Material Web の NPM
https://www.npmjs.com/package/@material/web
実装方法
npx nuxi init my-app1 でnuxt3プロジェクトを作成した後、npm i -D @material/web でパッケージを追加。
package.json
{
"name": "my-app1",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@material/web": "^1.1.1",
"nuxt": "^3.8.1"
}
}
nuxt.config.ts
export default defineNuxtConfig({
// viteのcompilerOptionsに"md-"から始まるHTML要素をカスタム要素であることを指定する。
vite: {
vue: {
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('md-'),
},
},
},
},
});
plugins/material.client.ts
// プロジェクト内で使用するコンポーネントを読み込む
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';
export default defineNuxtPlugin(nuxtApp => { });
app.vue
<template>
<!-- material3のボタンコンポーネント -->
<md-outlined-button @click="onClick">button1</md-outlined-button>
</template>
<script setup lang="ts">
// ボタンのクリックイベント
async function onClick() {
alert(`hello world`)
}
</script>
おわり。