{"id":42279,"library":"vue-webpack-loaders","title":"vue-webpack-loaders","description":"Provides a unified configuration of basic Webpack loaders for Vue.js applications, including vue-loader, babel-loader, css-loader, style-loader, json-loader, and url-loader. Version 1.0.8 targets Node >= 4.0.0 and npm >= 3.0.0. Based on vue-cli, this package simplifies Webpack setup for Vue projects but is now largely superseded by Vue CLI and other modern build tools. Maintained as part of vue-styleguidist. Release cadence is low; no updates since 2021.","status":"maintenance","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/vue-styleguidist/vue-webpack-loaders","tags":["javascript","webpack","loader","app","application","vue","js","babel"],"install":[{"cmd":"npm install vue-webpack-loaders","lang":"bash","label":"npm"},{"cmd":"yarn add vue-webpack-loaders","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-webpack-loaders","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to process .vue single-file components","package":"vue-loader","optional":false},{"reason":"Required to transpile ES2015+ JavaScript","package":"babel-loader","optional":false},{"reason":"Required to resolve CSS imports","package":"css-loader","optional":false},{"reason":"Required to inject CSS into DOM","package":"style-loader","optional":false},{"reason":"Required to load JSON files","package":"json-loader","optional":false},{"reason":"Required to handle file assets","package":"url-loader","optional":false}],"imports":[{"note":"Module exports a single object with individual loader config arrays. CommonJS require works but ESM import is preferred.","wrong":"const loaders = require('vue-webpack-loaders')","symbol":"default","correct":"import loaders from 'vue-webpack-loaders'"},{"note":"Named export is CJS module.exports, not ESM export. Use destructured require.","wrong":"import { vueLoaders } from 'vue-webpack-loaders'","symbol":"vueLoaders","correct":"const { vueLoaders } = require('vue-webpack-loaders')"},{"note":"babelLoaders is a property of the default export, not a direct named export.","wrong":"import { babelLoaders } from 'vue-webpack-loaders'","symbol":"babelLoaders","correct":"import loaders from 'vue-webpack-loaders';\nconst { babelLoaders } = loaders;"}],"quickstart":{"code":"// webpack.config.js\nconst loaders = require('vue-webpack-loaders');\n\nmodule.exports = {\n  module: {\n    rules: [\n      ...loaders.vueLoaders,\n      ...loaders.babelLoaders,\n      ...loaders.cssLoaders,\n      ...loaders.styleLoaders,\n      ...loaders.jsonLoaders,\n      ...loaders.urlLoaders\n    ]\n  }\n};\n\n// Example main.js\nimport Vue from 'vue';\nimport App from './App.vue';\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app');","lang":"javascript","description":"Configures webpack with Vue loaders and sets up a basic Vue application entry point."},"warnings":[{"fix":"Migrate to Vue CLI (@vue/cli) or Vite with @vitejs/plugin-vue.","message":"Package is no longer actively maintained; use Vue CLI or Vite for new projects.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use compatible Webpack version (4.x) or update loaders manually.","message":"Loader versions are pinned; may conflict with newer Webpack versions (Webpack 5+).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Run 'npm install --save-dev vue-loader babel-loader css-loader style-loader json-loader url-loader'.","message":"Requires all peer dependencies to be installed separately; not automatically included.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove jsonLoader usage from webpack config.","message":"json-loader is deprecated; Webpack 4+ handles JSON natively.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.0.8':37 '2021':84 '3.0.0':43 '4.0.0':40 'app':88 'applic':15,89 'babel':21,92 'babel-load':20 'base':44 'basic':10 'build':68 'cadenc':78 'cli':48,64 'configur':8 'css':24 'css-loader':23 'includ':16 'javascript':85 'js':91 'json':30 'json-load':29 'larg':60 'loader':4,12,19,22,25,28,31,35,87 'low':80 'maintain':70 'modern':67 'node':39 'npm':42 'packag':50 'part':72 'project':56 'provid':5 'releas':77 'setup':53 'simplifi':51 'sinc':83 'style':27 'style-load':26 'styleguidist':76 'supersed':61 'target':38 'tool':69 'unifi':7 'updat':82 'url':34 'url-load':33 'version':36 'vue':2,18,47,55,63,75,90 'vue-c':46 'vue-load':17 'vue-styleguidist':74 'vue-webpack-load':1 'vue.js':14 'webpack':3,11,52,86","created_at":"2026-06-04T18:56:29.214377+00:00","updated_at":"2026-06-04T18:56:29.214377+00:00","problems":[{"fix":"npm install --save-dev vue-loader","cause":"Missing peer dependency: vue-loader not installed.","error":"Cannot find module 'vue-loader'"},{"fix":"Ensure vueLoader is included in webpack module.rules.","cause":"Missing or misconfigured vue-loader for .vue files.","error":"Module parse failed: Unexpected token (1:0)"},{"fix":"Ensure no duplicate rules; use ...loaders.vueLoaders only once.","cause":"Conflicting loader rules when spreading loaders arrays.","error":"Error: Rule can only have one resource source (provided resource and test + include + exclude)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/vue-styleguidist/vue-webpack-loaders#readme","github":"https://github.com/vue-styleguidist/vue-webpack-loaders","docs":null,"changelog":null,"pypi":null,"npm":"vue-webpack-loaders","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}