vue-cli-plugin-yaml

1.0.2 verified Sat Apr 25 auth: no javascript

Vue CLI plugin that adds YAML support to Webpack via yaml-loader. Version 1.0.2, no recent updates. Allows importing .yml/.yaml files in Vue projects with zero configuration, supporting both default and named exports. Differentiates from manual webpack config by integrating seamlessly with Vue CLI's plugin system, making it trivial to add YAML loading to any Vue CLI project.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Webpack doesn't have a loader configured for .yml or .yaml files.

fix

Install and invoke vue-cli-plugin-yaml: vue add yaml

error Cannot find module 'yaml-loader' ↓

cause yaml-loader is not installed (should be a peer dependency).

fix

Run: yarn add -D yaml-loader

Warnings

deprecated Vue CLI (and its plugin system) is in maintenance mode, with Vue 3 preferring Vite. New projects should avoid using this plugin. ↓

fix Migrate to Vite-based Vue 3 projects and use Vite's built-in YAML support or a plugin like vite-plugin-yaml.

gotcha Named imports only work for top-level keys in the YAML file. Nested objects or arrays cannot be directly destructured. ↓

fix Use default import and access nested properties manually: import config from './config.yml'; config.nested.key

gotcha The plugin may conflict with other YAML-related webpack configurations if both are present. ↓

fix Ensure no duplicate yaml-loader rules are added manually.

Install

npm install vue-cli-plugin-yaml

yarn add vue-cli-plugin-yaml

pnpm add vue-cli-plugin-yaml

Imports

default
```
import config from './config.yml'
```
Default import yields the full YAML object as a plain JS object.
named
```
import { apiKey } from './config.yml'
```
Named imports for direct access to top-level keys. Requires the YAML file to be a flat object.
require
```
const config = require('./config.yml')
```
CommonJS require works in Vue CLI projects if using webpack's CJS compatibility.

Quickstart

Shows basic installation and usage: importing YAML files as JS objects with default and named exports.

// Install
// yarn add --dev vue-cli-plugin-yaml

// src/config.yml
// apiKey: abcd

// src/main.js
import config from './config.yml'
console.log(config) // { apiKey: 'abcd' }

import { apiKey } from '@/config'
console.log(apiKey) // 'abcd'