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 ments.

I tried both of these YAML parsers:

• (attempted to install via NPM)
• (attempted to install via the Vue GUI accessed with vue ui)

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 
> #im a ment
| foo: "hello"
| bar: "world"

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

#im a ment
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 () 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!

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 ments.

I tried both of these YAML parsers:

• https://github./nodeca/js-yaml (attempted to install via NPM)
• https://github./edus44/vue-cli-plugin-yaml (attempted to install via the Vue GUI accessed with vue ui)

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/concepts#loaders
> #im a ment
| foo: "hello"
| bar: "world"

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

#im a ment
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/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!

• javascript
• vue.js
• webpack
• yaml

• 3 Add a vue.config.js file to your project and read about Adding a New Loader. – Brian Lee Commented Nov 14, 2020 at 6:38
• I just added vue-cli-plugin-yaml to my vue project ... and everything just works out of the box - except I used import data from "@/assets/data.yaml" but that's just a path difference, so not relevant to any error you may be getting – Jaromanda X Commented Nov 14, 2020 at 7:01
• @JaromandaX Hmm I just made a vue new project by doing vue create test, following default steps, then adding vue-cli-plugin-yaml via npm install --save-dev vue-cli-plugin-yaml but I still still see the same error :( – SHiLLySiT Commented Nov 14, 2020 at 20:29
• @DigitalDrifter I followed your link, but it seems to assume that I have some knowledge of the loader API? I don't even know what the methods used here do (e.g. what does the use() function do?). I attempted to just replace the relevant bits in the example, but ended up with the same error. – SHiLLySiT Commented Nov 15, 2020 at 3:06
• @SHiLLySiT could you share the output from vue config inspect.It is your current project configuration which contains some boilerplate which may or may not be present in your vue.config.js file and vue adds when your project is creaetd – Eazash Commented Nov 15, 2020 at 7:28

2 Answers 2

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.

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')
  }
}