GitHubopen_in_new

Getting Started ​

Install the package, import the shared stylesheet, and register the plugin once at app startup.

Install ​

bash
pnpm add @rikkaw/m3-vue

Register The Plugin ​

ts
import { createApp } from 'vue';
import { M3VuePlugin } from '@rikkaw/m3-vue';
import App from './App.vue';

import '@rikkaw/m3-vue/style.css';

const app = createApp(App);

app.use(M3VuePlugin);
app.mount('#app');

After registration, v-tooltip, v-dropdown, v-dropdown-menu, and v-context-menu are available globally.

Use Components ​

vue
<script setup lang="ts">
import { Button } from '@rikkaw/m3-vue';
</script>

<template>
  <Button color="filled" leading-icon="favorite">Button</Button>
</template>

Auto Import ​

If you use unplugin-vue-components, pair it with M3VueResolver.

ts
import Components from 'unplugin-vue-components/vite';
import { M3VueResolver } from '@rikkaw/m3-vue';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [M3VueResolver()],
    }),
  ],
});