@datay/dxc-components

Sample setup for creating vue lib and web component

Usage

Within node environment

$ npm install --save @datay/dxc-components

<script>
import { Button, AnotherButton } from "@datay/dxc-components"

export default {
    components: {
        Button,
        AnotherButton
    }    
}
</script>

<template>
    <div>
        <Button />
        <AnotherBUtton />
    </div>
</template>

or on existing non vue project

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@datay/dxc-components"></script>
<div id="app">
    <dxc-components-button />
</div>

Building Components

Make sure first that vue cli and vue cli-service-global was installed globally. They will be use on building packages and service components

npm install -g @vue/cli @vue/cli-service-global

To build for lib and web components

npm run build

To only build lib components

npm run build:lib

To only build web components

npm run build:wc

Working on Components

When working on the components, there are too ways to vuew the output:

• via script tag -> wc
• via serving the vue component -> lib

Web Components

• Before the changes are reflected, make sure to build your changes.

npm run build:wc

• Load demo html in ./dist/demo.html to your browser

Lib Components

• Serve vue component

vue serve src/components/Button.vue

• See component in action on http://localhost:8080

License

MIT © Dixie Philamerah Atay