(共556篇)
全部分类

nuxt3采坑笔记
[ Nuxt ] 

加载ESM 模块类型的组件库

1
2
3
4
5
6
7
8
// nuxt.config.js
import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
    build: {
        transpile: ["vary-ui-v3"],
      },
})

支持对.vue类型文件的查找

大部分在引入单文件组件时,都会省略.vue后缀, 默认情况下是不支持的, 添加如下配置可以解决:

1
2
3
4
5
6
// nuxt.config.js
import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  extensions: [".js", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
})

添加全局的预处理样式文件

为了能快速改变项目主题, 全局预处理样式太重要了, 添加方法如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// nuxt.config.js
import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/index.scss";`,
        },
      },
    },
  },
});

监听路由变化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
export default {
	setup(){
    const route = useRoute();
    watch(
          () => route.name,
          (v) => {
            transparentTheme.value = ref(["index"].includes(v));
          },
          {
            immediate: true,
          }
        );
    }
}

注意:这里监听的只是name的变化,如果想监听query参数的变化需要改变写法