{"id":12647,"library":"w-component-vue","title":"W-Component-Vue","description":"W-Component-Vue is a collection of user interface components specifically designed for Vue.js version 2.x, currently at stable version 2.4.53. It offers various reusable components that can be easily integrated into Vue 2 applications, supporting both ES module imports for modern build setups and UMD modules for direct browser inclusion via CDN. The library emphasizes simplicity in its components and provides a straightforward installation and usage model, either by globally registering all components with `Vue.use()` or by importing individual components for granular control. While the library itself is functional, it is important to note that Vue 2 reached its End of Life (EOL) on December 31st, 2023. This means W-Component-Vue is primarily suited for maintaining existing Vue 2 projects, and new development in the Vue ecosystem should target Vue 3.","status":"maintenance","version":"2.4.53","language":"javascript","source_language":"en","source_url":"https://github.com/yuda-lyu/w-component-vue","tags":["javascript","component","vue","vuetify"],"install":[{"cmd":"npm install w-component-vue","lang":"bash","label":"npm"},{"cmd":"yarn add w-component-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add w-component-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, specifically Vue 2.x for component rendering and reactivity.","package":"vue","optional":false},{"reason":"Optional runtime dependency for Material Design Icons, if used by specific components.","package":"@mdi/font","optional":true},{"reason":"Optional runtime dependency for Font Awesome icons, if used by specific components.","package":"@fortawesome/fontawesome-free","optional":true}],"imports":[{"note":"Imports and registers all components globally for Vue 2 applications. This is the simplest way to get started with the entire library.","wrong":"const WComponentVue = require('w-component-vue') // CommonJS is not the primary module format for modern Vue apps","symbol":"WComponentVue","correct":"import WComponentVue from 'w-component-vue'\nVue.use(WComponentVue)"},{"note":"Imports a single component directly from its source `.vue` file. This requires a build setup (e.g., Webpack with `vue-loader`) to process Single File Components (SFCs).","wrong":"import { WText } from 'w-component-vue' // Individual components are not exported as named exports from the main package entry point.","symbol":"WText","correct":"import WText from 'w-component-vue/src/components/WText.vue'\nVue.component('w-text', WText)"},{"note":"For direct usage in a browser environment without a build step, the UMD bundle exposes the library on the `window` object.","symbol":"UMD Global Access","correct":"<script src=\"https://cdn.jsdelivr.net/npm/w-component-vue@2.4.53/dist/w-component-vue.umd.js\"></script>\nVue.use(window['w-component-vue'])"}],"quickstart":{"code":"import Vue from 'vue';\nimport WComponentVue from 'w-component-vue';\n\n// Optional: Link icon fonts for components that use them\n// Ensure these are included in your HTML or loaded via a build process\n// import '@mdi/font/css/materialdesignicons.min.css';\n// import '@fortawesome/fontawesome-free/css/all.min.css';\n\nVue.use(WComponentVue);\n\nnew Vue({\n  el: '#app',\n  data: {\n    message: 'Hello from W-Component-Vue!'\n  },\n  template: `\n    <div id=\"app\">\n      <w-text\n        :text=\"message\"\n        :level=\"1\"\n        :type=\"'primary'\"\n      ></w-text>\n      <w-button\n        text=\"Click Me\"\n        :type=\"'success'\"\n        @click=\"message = 'Button clicked!'\"\n      ></w-button>\n      <w-input\n        :value=\"message\"\n        @input=\"message = $event\"\n        label=\"Your message\"\n      ></w-input>\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates how to globally register and use several W-Component-Vue components (w-text, w-button, w-input) within a basic Vue 2 application."},"warnings":[{"fix":"For new projects, use Vue 3 and Vue 3-compatible component libraries. For existing Vue 2 projects, consider a Vue 3 migration or explore extended support options for Vue 2 if security updates are critical.","message":"W-Component-Vue is built exclusively for Vue 2.x and is not directly compatible with Vue 3. Vue 2 reached its End of Life (EOL) on December 31st, 2023, and no longer receives official updates, security fixes, or new features. Upgrading to Vue 3 would require migrating all Vue 2 components, including those from W-Component-Vue, which is a significant effort.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your project's build configuration includes `vue-loader` or equivalent for processing `.vue` files. Alternatively, use the global `Vue.use(WComponentVue)` approach to avoid direct SFC imports, or use the UMD bundle in a browser environment.","message":"When importing individual components (e.g., `import WText from 'w-component-vue/src/components/WText.vue'`), you are directly importing a Vue Single File Component (SFC) source file. This requires a build setup (like Webpack with `vue-loader` or Vite with `@vitejs/plugin-vue`) configured to process `.vue` files, otherwise, your build will fail with a module not found error or similar.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Manually include the required icon font CSS in your project's HTML file or import them into your main CSS/SCSS entry point, as shown in the README's UMD examples for `@mdi/font` and `@fortawesome/fontawesome-free`.","message":"Some components within W-Component-Vue may rely on external icon libraries (e.g., Material Design Icons, Font Awesome) which are not bundled with the library itself. If these external CSS resources are not loaded in your application, icons may appear as broken symbols or not render at all.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have called `Vue.use(WComponentVue)` after importing, or registered individual components using `Vue.component('w-text', WText)` or via the `components` option in your Vue instance/component.","cause":"The W-Component-Vue components were not properly registered with Vue before being used in a template.","error":"[Vue warn]: Unknown custom element: <w-text> - did you register the component correctly?"},{"fix":"In a browser, ensure the `<script src=\"https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js\"></script>` tag comes *before* the `w-component-vue` script. In an ES module environment, make sure `import Vue from 'vue'` is present.","cause":"The Vue.js library itself is not loaded or available in the scope where `WComponentVue` is being used, especially common in browser (UMD) setups or if Vue is not imported correctly.","error":"ReferenceError: Vue is not defined"},{"fix":"Configure your bundler (Webpack, Vite, Rollup) with the appropriate Vue plugin/loader (`vue-loader` for Webpack, `@vitejs/plugin-vue` for Vite) to process `.vue` files. If you don't have a build step, use the global `Vue.use(WComponentVue)` registration or the UMD bundle.","cause":"Attempting to import a `.vue` Single File Component directly without a build tool (e.g., Webpack with `vue-loader`, Vite) configured to handle `.vue` files.","error":"Module not found: Error: Can't resolve 'w-component-vue/src/components/WText.vue'"}],"ecosystem":"npm"}