W-Component-Vue

Common errors

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

  cause 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

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

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

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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`.

Install

• npm install w-component-vue npm
• yarn add w-component-vue yarn
• pnpm add w-component-vue pnpm

Imports

• WComponentVue
  wrong:

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

  correct:

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

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

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

  correct:

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

  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.

Quickstart

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>
  `
});