open-index/open-npm huggingface dataset:
npm package: @opencdms/helloworld
Description: Sample web component to be used in the opencdms application shell.
Author: OpenCDMS
Latest version: 0.1.0

# opencdms-helloworld

Sample web component to be used in the opencdms application shell.


## How to use

1. Clone the opencdms-app-shell
2. Install the web component `npm i opencdms-helloworld`
3. Create a  view page in `src/views` where the component would be rendered in. An example has been done in `src/views/CustomElementDemo.vue`.
4. Create a route entry in `src/routes` for the page created in step 3 above.
5. Create a registry entry in src/registry.json for the page created above. Set the display to true to include the page in side navigation bar.
6. Launch the application. (npm run serve)
 

## How to make yours

To create your own component using vuejs. 

1. Use vue cli to create a Vue 3 project where the web component would be built.
2. Define the component or page you want to export as a web component. 
3. You do not need the `src/App.vue` file. Delete it and also remove the contents of main.js file.
4. Import the component into `src/main.js` and define your component like so:

```
import { defineCustomElement } from 'vue';
// Import the component or page to be rendered as web component
import HelloWorld from './components/HelloWorldComponent.vue';

//Define it as a web component
const element = defineCustomElement(HelloWorld);

// Define the custom tag to be used to render the page. NOTE: The tag must be prefixed with `opencdms-`
customElements.define("opencdms-helloworld",element);

```

NOTE: The tag must be prefixed with `opencdms-`

5. Modify your package*.json files for export to npm. (ensure the "name" is unique, delete the `"private":false` field, add the entrypoint field `"main": "src/main.js"` to point to the main.js file).


### Testing

Before you export to npm, test it with opencdms to ensure it renders properly.

1. Inside the your local custom element package, run `npm link` to locally publish the package. 
2. Clone the opencdms app shell repo and install it running `npm install`
3. Install the locally published package into the application shell. `npm link opencdms-component` where opencdms-component is same with the name field in the package.json file of the package.
4. Import the component in any file where you want to render it.

```

<template>
   <div>
      <opencdms-component></opencdms-component>
    </div>
</template>
import 'opencdms-component'
...

```

## Publishing to NPM

Login into the appropriate account and run `npm publish`