{"id":20693,"library":"vue-cli-plugin-yaml","title":"vue-cli-plugin-yaml","description":"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.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/edus44/vue-cli-plugin-yaml","tags":["javascript","vue","vue-cli","plugin","webpack","yaml","yml","yaml-loader"],"install":[{"cmd":"npm install vue-cli-plugin-yaml","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-yaml","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-yaml","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default import yields the full YAML object as a plain JS object.","symbol":"default","correct":"import config from './config.yml'"},{"note":"Named imports for direct access to top-level keys. Requires the YAML file to be a flat object.","symbol":"named","correct":"import { apiKey } from './config.yml'"},{"note":"CommonJS require works in Vue CLI projects if using webpack's CJS compatibility.","symbol":"require","correct":"const config = require('./config.yml')"}],"quickstart":{"code":"// Install\n// yarn add --dev vue-cli-plugin-yaml\n\n// src/config.yml\n// apiKey: abcd\n\n// src/main.js\nimport config from './config.yml'\nconsole.log(config) // { apiKey: 'abcd' }\n\nimport { apiKey } from '@/config'\nconsole.log(apiKey) // 'abcd'","lang":"javascript","description":"Shows basic installation and usage: importing YAML files as JS objects with default and named exports."},"warnings":[{"fix":"Migrate to Vite-based Vue 3 projects and use Vite's built-in YAML support or a plugin like vite-plugin-yaml.","message":"Vue CLI (and its plugin system) is in maintenance mode, with Vue 3 preferring Vite. New projects should avoid using this plugin.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Use default import and access nested properties manually: import config from './config.yml'; config.nested.key","message":"Named imports only work for top-level keys in the YAML file. Nested objects or arrays cannot be directly destructured.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure no duplicate yaml-loader rules are added manually.","message":"The plugin may conflict with other YAML-related webpack configurations if both are present.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install and invoke vue-cli-plugin-yaml: vue add yaml","cause":"Webpack doesn't have a loader configured for .yml or .yaml files.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run: yarn add -D yaml-loader","cause":"yaml-loader is not installed (should be a peer dependency).","error":"Cannot find module 'yaml-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}