vue-cli-plugin-yaml-loader

Start 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.

⭐Features

Enable support for YAML file
Enable support for YAML file that includes multiple Yaml Document
Convert YAML to JSON

Install

This plugin can be installed from the Vue-CLI and does not require any configuration or settings.

Installation through the Vue UI:

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

Intallation through the CLI

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

USAGE

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.

Simple YAML

# src/asset/sample.yaml

sampleKey: SampleValue

Now just import them:

//src/main.js

# Simple Import
import myYamlObj from './asset/sample.yaml';

console.log(myYamlObj); //{ "sampleKey": "sampleValue"}

# By Omitting extension
import myYamlObj from './asset/sample';

console.log(myYamlObj); //{ "sampleKey": "sampleValue"}

# By destructuring the yaml (JSON) returned
import { sampleKey } from './asset/sample.yaml';

console.log(sampleKey); //"sampleValue"

Multiple YAML documents

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"}]

Zelig880/vue-cli-plugin-yaml-loader