@w2wds/vue NPM

@w2wds/vue

These are Vue 3 specific building blocks on top of @w2wds/core components.

We recommend using vite or otherwise vue-cli v5 (with Webpack 5) for the best bundle sizes (due to tree-shaking). If you want to migrate from vue-cli v4 to v5: follow this guide].

Tested on:

Important: Because of a breaking change in vue@3.1.0, you have to set "vue": "3.0.11" in the package.json of your project (and run npm install) until this is resolved.

Browser Support

We support only modern browsers: https://browserslist.dev/?q=ZGVmYXVsdHMsIG5vdCBpZSAxMQ%3D%3D

npx browserslist "defaults, not ie 11"

Using these components

Add this package to your project:

npm install @w2wds/vue --save

Or:

yarn add @w2wds/vue

Edit the main.js / main.ts file of a Vue 3 project like this:

import { createApp } from "vue";
import App from "./App.vue";
import { Way2WebDesignSystemVue } from "@w2wds/vue";

/* Core CSS required for Way2Web Design System components to work properly */
import "@w2wds/core/dist/core/core.css";

createApp(App).use(Way2WebDesignSystemVue).mount("#app");

Import the component(s) you want to use:

import { WayButton } from "@w2wds/vue";

Use it in your template as any Vue component:

// In kebab-case
<way-button href="https://www.way2web.nl">Way2Web</way-button>

// Or PascalCase
<WayButton href="https://www.way2web.nl">Way2Web</WayButton>

We recommend using kebab-case for our components and PascalCase for your own Vue components to make them visible distinct.

CodeSandbox example

An example of this setup using vue-cli v4: https://codesandbox.io/s/w2wds-vue3-example-5p787

Development

Follow the instructions in the root of this repo.

Test apps

In packages/vue/test-apps there are test apps for vite, vue-cli v5, and vue-cli v4

In order to run them:

Make sure you've run npm run bootstrap & npm run build in the root of this repo
Navigate to a test app, for example cd packages/vue/test-apps/vite
Run npm install
Run npm run sync (this copies the relevant core & vue dist files to the node_modules of the test-app)
Run the project, for example npm run dev for vite or npm run serve for vue-cli