Ant-design-vue: support nuxt.js

[munzirstudio]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Does this ui works in nuxt.js?

What does the proposed API look like?

As a plugin for nuxt.js

[chen-yan]

It does support nuxt, but has some bugs.

Here's configuration:

in package.json:

"devDependencies": { "less": "^3.8.1", "less-loader": "^4.1.0" }

in nuxt.config.js:

extend(config, {isDev, isClient}) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }); } config.module.rules.push({ enforce: 'pre', test: /\.less$/, loader: 'less-loader', options: { "modifyVars":{ "primary-color":"#0c93a4" }, javascriptEnabled : true, cssModules: true } }); }

add plugin.vue:

`import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.config.productionTip = false
export default()=>{
Vue.use(Antd)
}`

Then fix bug to get it work:

In /spin/style/index.less, replace it with below codes.

/* autoprefixer: off */ filter: ~"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";

[baoyadong]

@chen-yan 我这边也是直接引入ant-design-vue报错：
import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' import '../assets/css/variable.less' Vue.use(Antd)
nuxt.config.js引入
plugins: [ '~plugins/antd-ui.js' ],
也是直接报错：{ ReferenceError: Antd is not defined }
不知道是什么原因?大神们，赶紧看看吧

[chen-yan]

@baoyadong Please import ant-design-vue in your package.json

[tangjinzhou]

But we don't have a lot of practical cases in Nuxt.
If there is a problem, you can give us an issue and we will try to solve it.

[mapsgeek]

@chen-yan i followed your config but i'm getting this error
× error C:\Users\ibrah\Desktop\farclosertravel\node_modules\ant-design-vue\dist\antd.less:1 (function (exports, require, module, __filename, __dirname) { @import "../lib/style/index.less"; ^ SyntaxError: Invalid or unexpected token

[munzirstudio]

I have the same problem with @mapsgeek error
✖ error /htdocs/auth/node_modules/ant-design-vue/dist/antd.less:1
(function (exports, require, module, __filename, __dirname) { @import "../lib/style/index.less";

[tangjinzhou]

234

[maziarz]

modifyVars does not really work in nuxt 2.3.4. Not sure what has changed?

 extend (config, ctx) {
      ctx.loaders.less.javascriptEnabled = true
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          test: /\.less$/,
          loader: 'less-loader',
          options: {
            'modifyVars': {
              'primary-color': '#193D71'
            }
          }
        })
      }
 }

[iojanis]

@maziarz Your code and chen-yan's doesn't work on me either. The style remains the same. I also use nuxt 2.3.4

[maziarz]

@maziarz Your code and chen-yan's doesn't work on me either. The style remains the same. I also use nuxt 2.3.4

I got it working now. Took a while though. Unfortunately this solution does not work with hot-reload. If anyone manage to fix the hot-reload issue, i'd love to hear from them.

extend (config, ctx) {
    ctx.loaders.less.javascriptEnabled = true
    ctx.loaders.less.modifyVars = {
        'primary-color':                '#479ff1',
        'component-background':         '#262626'
    }
    ....
}

UPDATE: You can use it with hot-reload, but the changes will not reflect in the hot-reload. You need to stop restart the entire npm run dev process for the changes to be applied. I would assume it has something to do with the way the variables have been injected into the less-loader. A better solution is needed.

[iojanis]

Okay, that's not too bad. But somehow it still doesn't work.

My config looks like this:

...
  build: {
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      ctx.loaders.less.javascriptEnabled = true
      ctx.loaders.less.modifyVars = {
        'primary-color': '#f11000',
        'component-background': '#262626',
        'border-radius-base': '2px'
      }
    }
  }
...

[maziarz]

@iojanis, do you have less and less-loader installed?

[iojanis]

Oh dear... I stupidly imported the CSS instead of the LESS file.

[TranTrungTinh]

It's working nuxt 2.4.0. Maybe help.

css: [
    { src: 'ant-design-vue/dist/antd.less', lang: 'less' }
 ],
...
build: {
    extend(config, ctx) {
    // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
      }
    },
    loaders: {
      less: {
        modifyVars: {
          'primary-color': '#FF9417',
          'link-color': '#FF9417'
        },
        javascriptEnabled: true
      }
    }
  }
...

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.