How do you load a YAML file in Vue?

user_2480646 0
Viewed 3960

I've relatively new to Vue and the web ecosystem as a whole.

I've been building a small app and decided that I wanted to use YAML to store data instead of JSON mainly so that I could use comments.

I tried both of these YAML parsers:

However both had the same issue when I ran vue serve:

 error  in ./assets/data.yaml

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #im a comment
| foo: "hello"
| bar: "world"

I'm fairly certain this is valid YAML...here's what my YAML file looks like:

#im a comment
foo: "hello"
bar: "world"

Here is how I tried to import it:

import data from "./assets/data.yaml"

I tried following the instructions at the URL that the error pointed to (https://webpack.js.org/concepts#loaders) but was immediately lost because:

  1. I don't have a webpack.config.js in my project (it was setup automatically for me via vue-cli)
  2. The format const path = require('path'); doesn't appear to work in a Vue project?

Both of the YAML parsers and the webpack page assume a lot of prerequisite knowledge that I don't have and further Googling as only confused me more :(

Any pointers would be greatly appreciated!

vue.js webpack yaml javascript
2 Answers

After fiddling with vue-cli-plugin-yaml for awhile, I gave up and tried @DigitalDrifter's advice and read up on Adding a New Loader. However this page alone didn't have a ton of information on how to use the API, so I browsed vue.config.js files on Github until I could piece one together:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('yaml')
        .test(/\.ya?ml?$/)
        .use('json-loader')
          .loader('json-loader')
          .end()
        .use('yaml-loader')
          .loader('yaml-loader')
  }
}

As the vue.config.js file shows, I ended up installing yaml-loader and json-loader.

However, this still didn't work. I tried for ages with different configurations of vue.config.js only to eventually discover that the file needs to live in my src folder, not the root of my project e.g. project_folder/src/vue.config.js NOT project_folder/vue.config.js.

However this seems to go against what official docs say:

vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json).

It also causes vue inspect --rule yaml to return undefined so I don't think this is a real solution but rather a workaround, so I won't accept this as the answer. Not sure if the docs are wrong, or if there's something weird with my environment. Its certainly not just this project as a fresh one had the same issues.

Here are the results of vue inspect.

user_24806460

according to json-loader: Since webpack >= v2.0.0, importing of JSON files will work by default.

Thus just install and use yaml-loader should work (at least it work for me). Also you should modify vue.config.js like this:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('yaml')
        .test(/\.ya?ml?$/)
        .use('yaml-loader')
          .loader('yaml-loader')
  }
}
user_180652250
Related