How do I read yaml file using javascript with framwork vuejs

Question

I have Vuejs app need to read data from YAML file in the root directory, so I google it and then find some useful package on Github this link I know they are created just for Nodejs as backend, but they have a way to work with a browser in their documentation I follow it but it's not loading my YAML file in the root directory it's just print the file name of YAML ../../example.yaml .

example.yaml

greeting: hello
name: world

page.vue

<template>
  <div class="about">
    <button class="btn btn-success" @click="doIt">create</button>
  </div>
</template>

<script>
const jsyaml = require('js-yaml');

export default {
  methods:{
    doIt(){
      var doc = jsyaml.load('../../example.yaml');
      console.log("your content yaml file is : ", doc);    
    }
  }
}
</script>

So my question how can I solve it?

Answer 1

jsyaml.load expects a YAML string , not a path or URL. If you're using webpack, you can use raw-loader to import the file as a string for use in your app.