Ember

For Monorepos (recommended)

It's recommended to use the getting started docs for creating a Stencil project using the native Stencil tooling. This way, in your Ember project, you don't need to configure anything extra, and you can use Stencil components natively.

For example, if using the Ionic Framework in your Ember project:

1. Add the Ionic Framework to your app:

npm

npm install @ionic/core

Yarn

yarn add @ionic/core

pnpm

pnpm add @ionic/core

2. Install the components from the library:

app/app.js

import '@ionic/core'; // installs all the components from Ionic Framework

3. Use the components anywhere:

app/components/example.gjs

<template>
  <ion-toggle></ion-toggle>
</template>

4. You can hook up events / state (controlled component pattern):

app/components/example-with-state.gjs

import { on } from '@ember/modifier';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class Demo extends Component {
  <template>
    <ion-toggle checked="{{this.isOn}}" {{on "ionChange" this.toggle}}></ion-toggle>
  </template>

  @tracked isOn = true;
  
  toggle = () => this.isOn = !this.isOn;
}

Live Demo (using Ionic from a CDN)

Legacy

Working with Stencil components in Ember is really easy thanks to the ember-cli-stencil addon. It handles:

• Importing the required files into your vendor.js
• Copying the component definitions into your assets directory
• Optionally generating a wrapper component for improved compatibility with older Ember versions

Start off by installing the Ember addon

ember install ember-cli-stencil

Now, when you build your application, Stencil collections in your dependencies will automatically be discovered and pulled into your application. You can just start using the custom elements in your hbs files with no further work needed. For more information, check out the ember-cli-stencil documentation.

NOTE: ember-cli-stencil hasn't kept up with ember's evolution and will not work in newer ember apps.