Zelig880 / vue-cli-plugin-yaml-loader

Add the necessary Webpack Config necessary to be able to import Yaml files

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

Add the necessary Webpack Config necessary to be able to import Yaml files

License:MIT License


Languages

Language:JavaScript 100.0%