Nuxt.js: A way to import YAML as a JavaScript object

[davision]

What problem does this feature solve?

I've tried to use YAML files as data object, followed an example from Next.js https://github.com/zeit/next.js/issues/3141. So if I use something like this

// pages/index.vue
import data from `~static/data.yml`

export default {
  data () {
    return {
      data
    }
  }
)

And then add yaml loader in nuxt.config.js

build: {    
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push(
          {
            test: /\.ya?ml$/,
            use: 'js-yaml-loader',
          }
        )
      }
    }
  }

This works until I refresh the page. Then I got an error: Module parse failed: Assigning to rvalue (1:2) You may need an appropriate loader to handle this file type. And then on next refresh another error: render function or template not defined in component: anonymous

Any ideas how to properly use YAML files?

_{This feature request is available on Nuxt community (#c8447)}

[galvez]

I plan on working on this feature.

[davision]

I've found the problem, ctx.isClient was the case. I made configuration this way:

build: {    
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push(
          {
            enforce: "pre",
            test: /\.(js|vue)$/,
            loader: "eslint-loader",
            exclude: /(node_modules)/,
            options: {
              fix: true
            }
          }
        ),
        config.module.rules.push({
          test: /\.ya?ml$/,
          use: 'js-yaml-loader',
        })
      }
    }
  }

But now nuxt generate still doesn't work. Does not register a yaml-loader.

Any Ideas?

[galvez]

I think you might need to remove the isDev check.

[davision]

Ah yes, late night coding not always fruitful :) I've put yaml test outside the condition and everything is good now!

Just leaving a working example for other interested into this option:

  build: {    
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.ya?ml$/,
        use: 'js-yaml-loader',
      })
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/,
          options: { fix: true }
        })
      }
    }
  }

[manniL]

Closing here then ☺️