@thirstcreative/thirst-components
v0.1.5
Published
> Sample setup for creating vue lib and web component
Downloads
8
Keywords
Readme
@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