How do I dynamically load a YAML file as an object in a VuePress Vue Component?

Question

I'm trying to embed SwaggerUI into my vuepress site. I got this far

<template><div :id="id">swagger</div>
</template>

<script>
// import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
import SwaggerUI from "swagger-ui";
import x from '@/upload-api.yml'
export default {
  props: {
    src: String
  },
  data() {
    return {
      id: null,
      spec: {}
    };
  },
  mounted() {
    this.id = `swagger${this._uid}`;
    // over here, I want to use `this.src` to pull the data
    console.log(x);
  },
  updated() {
    if (this.id !== null) {
      SwaggerUI({
        domNode: this.$el,
        // dom_id: `#${this.id}`,
        spec: this.spec,
      });
    }
  }
};
</script>

<style></style>

In my plugin I have:

const path = require('path');
module.exports = {
  chainWebpack (config, isServer) {
    config.module
      .rule("compile")
      .test(/\.ya?ml$/)
      .type("json")
      .use("yaml")
      .loader("yaml-loader");
    config.resolve.alias.set("@", path.resolve("."));

Here's some other things I tried

console.log(require(this.src));

which gets me

[Vue warn]: Error in mounted hook: "Error: Cannot find module '@/upload-api.yml'"

This works though

console.log(require("@/upload-api.yml"));

Answer 1

I ended up doing the following

I also tried a solution similar to Static image src in Vue.js template

# Upload

<SwaggerUi :spec="require('@/upload-api.yml')" />

<template>
  <div>swagger</div>
</template>

<script>
import SwaggerUI from "swagger-ui";
export default {
  props: {
    spec: Object
  },
  mounted() {
    SwaggerUI({
      domNode: this.$el,
      spec: this.spec
    });
  }
};
</script>

<style>
@import "~swagger-ui/dist/swagger-ui.css";
</style>

And a plugin

const path = require('path');
module.exports = {
  chainWebpack (config, isServer) {
    config.module
      .rule("compile")
      .test(/\.ya?ml$/)
      .type('json')
      .use("yaml")
      .loader("yaml-loader");
    config.resolve.alias.set("@", path.resolve("."));
    // config is an instance of ChainableConfig
  },
}

upload-api.yml

openapi: "3.0.2"
info:
  title: OpenWeatherMap
  version: '1.0'
paths:
  /weather:
    get:

Which gives me: