Vue 支持

Nasti 内置 Vue 3 单文件组件（SFC）支持。

安装

Vue 的 SFC 编译器作为可选依赖，需要手动安装：

npm install vue
npm install -D @vue/compiler-sfc

Vapor Mode（测试版）需要 vue / @vue/compiler-sfc ≥ 3.6：

npm install vue@^3.6.0-0
npm install -D @vue/compiler-sfc@^3.6.0-0

特性

.vue 单文件组件完整支持（script、template、style）
<script setup> 语法支持
Scoped CSS
Vue HMR 热更新（模板/样式修改不丢失状态）
TypeScript 支持（<script setup lang="ts">）
Vue 3.6 Vapor Mode（测试版，opt-in）

配置

// nasti.config.ts
import { defineConfig } from '@nasti-toolchain/nasti'

export default defineConfig({
  framework: 'vue',
})

Vapor Mode（测试版）

Vapor Mode 是 Vue 3.6 的 opt-in 编译策略：跳过 Virtual DOM，生成直接 DOM 操作。 Nasti 支持单文件标记与环境级强制；仅支持 <script setup> / 纯 template SFC， Options API 不可用。

单文件 opt-in

<!-- 在 script setup 上加 vapor -->
<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<!-- 或在 template 上加 vapor（纯 template SFC） -->
<template vapor>
  <div>hi</div>
</template>

环境级强制

export default defineConfig({
  framework: 'vue',
  environments: {
    client: {
      vue: {
        features: { vapor: true },
      },
    },
  },
})

测试版免责声明： 启用 Vapor 时，终端与浏览器控制台会打印： Vapor Mode is a beta feature; Zixiao Labs and the Vue team do not provide guarantees against crashes in production environments, and it is not suitable for server-side rendering environments. 请勿在 SSR 或对稳定性有强要求的生产路径中依赖该模式。

示例

入口文件

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

组件

<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <h1>Nasti + Vue</h1>
    <button @click="count++">Count: {{ count }}</button>
  </div>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

HMR 行为

<template> 修改：热重渲染，保持组件状态
<style> 修改：CSS 热替换，无需刷新页面
<script> 修改：组件重新加载

注意： 如果没有安装 @vue/compiler-sfc， Nasti 会在控制台输出警告并跳过 .vue 文件的编译。