Add support for YAML in your Webpack config.
npm install vue-cli-plugin-yaml-loaderStart to support YAML file within your Vue application in minutes
This is a vue-cli plugin to add support for YAML file, using yaml-loader and webpack.
- Enable support for YAML file
- Enable support for YAML file that includes multiple Yaml Document
- Convert YAML to JSON
This plugin can be installed from the Vue-CLI and does not require any configuration or settings.
- Initialize the UI: vue ui
- Access the plugin menu
- Click Add Plugin on the top right or search for vue-cli-plugin-yaml-loader
- Click Install vue-cli-plugin-yaml-loader
- Follow the screen settings
- Voila'... you are ready lo load Yaml in your project
- Navigate to your project
- type vue add vue-cli-plugin-yaml-loader
- follow the CLI promps
- Voila'... you are ready lo load Yaml in your project
Just add a YAML file within your project. The Plugin offer two option. One to load simple YAML, and one to include multiple YAML documents.
src/asset/sample.yaml
sampleKey: SampleValue
Now just import them:
//src/main.js
console.log(myYamlObj); //{ "sampleKey": "sampleValue"}
console.log(myYamlObj); //{ "sampleKey": "sampleValue"}
console.log(sampleKey); //"sampleValue"
A single YAML file can include MULTIPLE YAML document. This are usually defined by start of document separator "---". To use this feature you need to add a "stream" parameters, within the YAML import:
src/asset/multiDocument.yaml
---
title: Document one
---
title: Document two
Now just import them using the stream flag:Multi Document import
import multiDocumentYaml from './asset/multiDocument.yaml?stream';
console.log(multiDocumentYaml); //[{ "title": "Document one"}, { "title": "Document Two"}]