Import yaml files with a Vite setup?

[Dylan190774]

With Webpack I used yaml-import-loader to import some yaml settings files in my Vue components.

Is there a way to import yaml files with Vite?

[yusufkandemir]

You can try your luck with https://github.com/Modyfi/vite-plugin-yaml
You might get more info or suggestions at Vite's Discord server

[yusufkandemir]

Reading the documentation is always the wisest thing to do:
https://quasar.dev/quasar-cli-vite/handling-vite#adding-vite-plugins

[Dylan190774]

Yes, and it's not working....

      vitePlugins: [
        [
          "@intlify/vite-plugin-vue-i18n",
          {
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // compositionOnly: false,

            // you need to set i18n resource including paths !
            include: path.resolve(__dirname, "./src/i18n/**"),
          },
        ],
        [
          require("@modyfi/vite-plugin-yaml"),
          {
            /* options */
          },
        ],
      ],

in quasar.config.js gives no error when I run the app, but when I import a yaml files in my component, I get:

BabylonModel.vue?t=1671652180261:1177 Uncaught (in promise) TypeError: Cannot destructure property 'default' of 'undefined' as it is undefined.

[yusufkandemir]

Do not pass an empty object as the options parameter, @modyfi/vite-plugin-yaml doesn't handle it well. Only pass it if you are actually going to define some options. Not related to Quasar, it's just how that plugin works. This should work:
quasar.config.js > build > vitePlugins

[ require("@modyfi/vite-plugin-yaml") ]

src/assets/test.yml:

test:
  arr:
    - 1
    - 5

// example: usage in src/IndexPage.vue
import test from "assets/test.yml";

console.log(test);
/*
  {
    test: {
      arr: [1, 5]
    }
  }
*/

[Dylan190774]

Thanks for your help, I did exactly what you did, but I still get an error:
SyntaxError: The requested module '/src/assets/test.yml?import' does not provide an export named 'default'

I think I'll put the yaml files in public now, and try it with axios and js-yaml

[yusufkandemir]

vitePlugins: [
  [require('@modyfi/vite-plugin-yaml').default]
]

and

vitePlugins: [
  ['@modyfi/vite-plugin-yaml']
]

both work

https://stackblitz.com/edit/quasar-import-yaml?file=src/pages/IndexPage.vue,src/assets/test.yaml,quasar.config.js