As a newcomer to Vue and the world of web development, I recently embarked on building a small app. In order to store data with comments, I opted to use YAML instead of JSON.
I experimented with two different YAML parsers:
- https://github.com/nodeca/js-yaml (attempted installation via NPM)
- https://github.com/edus44/vue-cli-plugin-yaml (attempted installation via the Vue GUI using
vue ui)
However, both parsers presented the same issue when I executed 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"
Despite believing my YAML syntax to be correct, here is how my YAML file is structured:
#im a comment
foo: "hello"
bar: "world"
This is how I attempted to import it:
import data from "./assets/data.yaml"
Although I tried to follow the instructions provided at the URL mentioned in the error message (https://webpack.js.org/concepts#loaders), I quickly found myself lost because:
- I do not have a webpack.config.js file in my project as it was set up automatically by vue-cli.
- The format
const path = require('path');does not seem to work in a Vue project?
Both YAML parsers and the webpack documentation assume a level of knowledge that I do not possess, and my attempts to find clarity through additional research have only added to my confusion :(
Any guidance or insights would be greatly appreciated!