如何在Nuxt 3中分离Vue模板、TS脚本与SCSS样式文件？

Nuxt 3对组件拆分的支持更偏向于基于<script setup>的模块化方式，和Nuxt 2的实现逻辑有差异，以下是可行的分步方案：

1. 组件目录结构 #

将目标组件拆分为独立文件，统一放在同名文件夹下（确保Nuxt 3自动导入能识别）：

components/
├─ MyComponent/
│  ├─ MyComponent.vue    # 主入口文件
│  ├─ MyComponent.template.vue  # 独立模板文件
│  ├─ MyComponent.ts      # TypeScript脚本文件
│  └─ MyComponent.scss    # SCSS样式文件

2. 主入口文件（MyComponent.vue） #

在主文件中通过src属性引入拆分后的模板、脚本和样式：

<template src="./MyComponent.template.vue"></template>

<script setup lang="ts" src="./MyComponent.ts"></script>

<style lang="scss" src="./MyComponent.scss" scoped></style>

3. 独立模板文件（MyComponent.template.vue） #

仅保留Vue模板内容，可直接使用脚本中定义的变量：

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

4. TypeScript脚本文件（MyComponent.ts） #

采用<script setup>语法编写逻辑，无需手动导出，Nuxt 3会自动处理响应式变量的关联：

import { ref } from 'vue'

const title = ref('Hello Nuxt 3')
const description = ref('这是模板、脚本与样式分离的示例组件')

5. SCSS样式文件（MyComponent.scss） #

编写组件样式，主文件中已添加scoped属性，样式仅作用于当前组件：

.my-component {
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;

  h1 {
    color: #2d3748;
    margin-bottom: 1rem;
  }

  p {
    color: #4a5568;
    line-height: 1.6;
  }
}

关键注意事项 #

• 主组件文件名必须与所在文件夹同名，否则Nuxt 3的组件自动导入功能无法识别
• 若需要全局样式，移除<style>标签的scoped属性即可
• 脚本文件必须配合<script setup>语法（Nuxt 3推荐写法），否则可能出现变量无法在模板中访问的问题
• 模板文件无需额外配置，主文件的关联会自动建立模板与脚本的上下文连接

内容的提问来源于stack exchange，提问作者Richard