Registry / web-framework / w-component-vue

w-component-vue

library2.4.53jsnpmunverified

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.

web-framework

npm install w-component-vue

github ↗package ↗

INSTALL

IMPORT

SIG · W-COMPONENT-VUE

w-component-vue

web-frameworkjavascriptv2.4.53

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

WComponentVue

✓ import WComponentVue from 'w-component-vue' Vue.use(WComponentVue)

✗ const WComponentVue = require('w-component-vue') // CommonJS is not the primary module format for modern Vue apps

Imports and registers all components globally for Vue 2 applications. This is the simplest way to get started with the entire library.

WText

✓ import WText from 'w-component-vue/src/components/WText.vue' Vue.component('w-text', WText)

✗ import { WText } from 'w-component-vue' // Individual components are not exported as named exports from the main package entry point.

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).

UMD Global Access

✓ <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.53/dist/w-component-vue.umd.js"></script> Vue.use(window['w-component-vue'])

For direct usage in a browser environment without a build step, the UMD bundle exposes the library on the `window` object.

Demonstrates how to globally register and use several W-Component-Vue components (w-text, w-button, w-input) within a basic Vue 2 application.

import Vue from 'vue'; import WComponentVue from 'w-component-vue'; // Optional: Link icon fonts for components that use them // Ensure these are included in your HTML or loaded via a build process // import '@mdi/font/css/materialdesignicons.min.css'; // import '@fortawesome/fontawesome-free/css/all.min.css'; Vue.use(WComponentVue); new Vue({ el: '#app', data: { message: 'Hello from W-Component-Vue!' }, template: ` <div id="app"> <w-text :text="message" :level="1" :type="'primary'" ></w-text> <w-button text="Click Me" :type="'success'" @click="message = 'Button clicked!'" ></w-button> <w-input :value="message" @input="message = $event" label="Your message" ></w-input> </div> ` });

Debug

Known issues

breakingW-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.

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.

affects: >=2.0.0

gotchaWhen 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.

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.

affects: >=2.0.0

gotchaSome 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.

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`.

affects: >=2.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <w-text> - did you register the component correctly?

The W-Component-Vue components were not properly registered with Vue before being used in a template.

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.

ReferenceError: Vue is not defined

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.

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.

Module not found: Error: Can't resolve 'w-component-vue/src/components/WText.vue'

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.

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.

Upgrade

Version history

2.4.53latest on npm

Audit

Dependencies

vuerequiredPeer dependency, specifically Vue 2.x for component rendering and reactivity.

@mdi/fontoptionalOptional runtime dependency for Material Design Icons, if used by specific components.

@fortawesome/fontawesome-freeoptionalOptional runtime dependency for Font Awesome icons, if used by specific components.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/yuda-lyu/w-component-vue ↗

packagehttps://www.npmjs.com/package/w-component-vue ↗