The Phemium Web Components are web utilities to accelerate the integrations of some Phemium parts in web technologies projects.
Here you can find the list of the current available components:
The first step to use the Phemium Web Components is to download the dependency. Using npm you must execute:
npm i @phemium-costaisa/phemium-web-components
Depending on the JS framework you're using, you'll need to follow the proper steps. These are the Frameworks now supported:
- AngularJS
- Angular 2+
- React
- Vue
First of all you need to copy all the content from node_modules/@phemium-costaisa/phemium-web-components/dist into to somewhere else inside your project (e.g. your-app/phemium-web-components).
Once you have all the compiled files inside your project you will need to add the following line inside HEAD tag of your index.html:
<script src="phemium-web-components/phemium-web-components.js"></script>
-
Import the loader somewhere in your project (e.g.
main.ts
):import { defineCustomElements as phemiumLoader } from "@phemium-costaisa/phemium-web-components/loader";
-
In the same file, you must add this line to initialize the loader:
phemiumLoader(window);
-
In your page modules definition you'll need to add CUSTOM_ELEMENTS_SCHEMA to your available schemas (e.g.
app.module.ts
):import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // Other imports and declarations @NgModule({ declarations: [AppComponent], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, Push, ], bootstrap: [AppComponent] bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] // <-- Add Here! })
On your index.js:
import { defineCustomElements as phemiumLoader } from "@phemium-costaisa/phemium-web-components/loader";
phemiumLoader(window);
import { defineCustomElements as phemiumLoader } from "@phemium-costaisa/phemium-web-components/loader";
Vue.config.ignoredElements = [/test-\w*/];
phemiumLoader(window);
git clone https://gitlab.phemium.com/phemium/phemium-web-components
cd phemium-web-components
and run:
npm install
npm start
To build the component for production, run:
npm run build