JS-only components in Aurelia 2

vNext
1

I’m trying to use Aurelia 2 with the enhance API, but due to platform restrictions I can’t deploy HTML files. I know Aurelia 1 had the @inlineView decorator, but I couldn’t find an equivalent in the 2nd version.

Is there currently a way to define views without using HTML files in Aurelia 2?

1 Like
2

if you look at the decorator for custom elements Using @customElement decorator - The Aurelia Docs you’ll notice the template prop. in the given sample its imported from an HTML but can be a string instead as well

2 Likes
3

Thank you! I had read that page but didn’t realise that @customElement can be used with strings.

However, I’m still having problems instantiating the component with the enhance API. My code looks like this:

// test-component.js
import { customElement } from 'aurelia'

@customElement({
    name: 'test-component',
    template:
    `<div>
        <h1>Test</h1>
    </div>`
})
export class TestComponent {
    
    attached() {
        console.log('attached!')
    }
}

// index.js
import Aurelia from 'aurelia'
import { TestComponent } from './test-component'

const controller = await Aurelia.enhance({
    host: document.getElementById('container'),
    component: TestComponent
})
console.log(controller)

The attached method on the component is called, and controller.host points to the div element on my page, but the DOM element doesn’t get populated with any content.

1 Like
4

When enhancing, the template is the component template. This means the template specified in the @customElement decorator will not be used.