Nuxt VueUse使用

一、安装

npm i -D @vueuse/nuxt @vueuse/core

VueUse中文文档：https://www.vueusejs.com/guide/

二、nuxt.config.js 配置

buildModules: [
    ......,
    '@vueuse/nuxt',
  ],


build: {
    ......,
    extend(config, {isDev, isClient}) {
      config.module.rules.push(
     ......,
     {
        test: /\.mjs$/, // mjs文件不转成js文件
        include: /node_modules/,
        type: 'javascript/auto'
      });
    }
  },

三、使用xxx.vue

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

useMouse()

 四、部分示例

1、改变颜色 useCssVar 

<div class="mock" ref="mock" style="color: var(--color)">mock:</div>


handleMock(e) {
            const ref = this.$refs.mock;
            const mode = this.$vueUse.useCssVar('--color', ref)
            mode.value = '#df8543'
        },