Vue Components and Nuxt SSR

@awc-ui/vue provides typed Vue 3 wrappers that register their underlying custom elements when imported.

npm install @awc-ui/vue @awc-ui/core

Load the theme once in your application entry:

import '@awc-ui/core/css/tokens.css';

Use normal Vue component events and v-model:

<script setup lang="ts">
import { ref } from 'vue';
import { MdButton, MdTextField } from '@awc-ui/vue';
const name = ref('');
</script>

<template>
  <MdTextField label="Project name" v-model="name" />
  <MdButton variant="filled">Create project</MdButton>
</template>

@mdInput and @mdChange receive the original CustomEvent; read its typed detail payload. The model updates before the event handler runs. Text fields, autocomplete and OTP update on mdInput; select, date/time and numeric controls update on mdChange. Checkbox and switch models are booleans, multi-select models are arrays, and radios sharing a model select an option by its value:

<MdRadio v-model="plan" name="plan" value="basic">Basic</MdRadio>
<MdRadio v-model="plan" name="plan" value="pro">Pro</MdRadio>

Import MdRadio from @awc-ui/vue and initialize plan to the selected option’s value. Individual wrapper imports need neither the plugin nor custom-element compiler configuration.

Raw custom elements in Vue

For raw md-* tags in precompiled .vue files, configure the build-time compiler. With Vite:

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: { isCustomElement: (tag) => tag.startsWith('md-') },
    },
  })],
});

Register the raw elements used by the application with static imports:

<script setup lang="ts">
import { ref } from 'vue';
import '@awc-ui/core/components/md-select';
const country = ref('');
</script>

<template>
  <md-select :value.prop="country" @mdChange="country = $event.detail" />
</template>

AwcUiVue remains available for lazy-loader registration and runtime-compiled templates. Its runtime app.config.compilerOptions setting cannot configure Vite’s SFC compiler; raw tags still need the build-time setting above.

Nuxt 3 server-side rendering

For Nuxt, configure both Vue compilers to accept md-* custom elements and load the global tokens:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("md-"),
    },
  },
  css: ["@awc-ui/core/css/tokens.css"],
});

A client-only Nuxt plugin registers the elements. A Nitro render hook uses @awc-ui/core/hydrate to inject Declarative Shadow DOM into the server HTML. The complete pattern is implemented in the validated Nuxt SSR reference app and the production-shaped Nuxt showcase.

See the Web Components SSR guide for the server transform and client hydration lifecycle.