Vue Macros

English

简体中文

English

简体中文

Appearance

On this page

Astro Integration ​

Installation ​

bash
npm i -D @vue-macros/astro
bash
yarn add -D @vue-macros/astro
bash
pnpm add -D @vue-macros/astro

Configuration ​

ts
// astro.config.mjs
import { defineConfig } from 'astro/config'
import Vue from '@astrojs/vue'
import Macros from '@vue-macros/astro'

export default defineConfig({
  integrations: [
    Vue(),
    Macros({
      // ... configs
    }),
  ],
})

TypeScript Support & Volar Support ​

Same with Bundler Integration

Limitations ​

Currently if you want to use shortVModel you need to explicitly config the vue.template.compilerOptions.nodeTransforms:

Don't know why yet, but we will figure it out soon.

ts
import { defineConfig } from 'astro/config'
import Vue from '@astrojs/vue'
import Macros from '@vue-macros/astro'
import { transformShortVmodel } from '@vue-macros/short-vmodel'

export default defineConfig({
  integrations: [
    Vue({
      jsx: true,
      template: {
        compilerOptions: {
          // explicit add transformShortVModel to node transforms 
          nodeTransforms: [transformShortVmodel()]
        },
      },
    }),
    Macros(),
  ],
})

🎉 Congratulations! That's all.

To learn more about the macros, please visit All Macros 😆.