Using PVue with CustomElements (with examples) #130

alshdavid · 2022-02-15T06:06:20Z

alshdavid
Feb 15, 2022

You can use pvue with custom elements!

Simple Example

<body>
  <app-foo></app-foo>
  <script type="module">
    import * as Vue from 'https://unpkg.com/petite-vue?module'

    class AppComponent extends HTMLElement {
      #app = undefined
      state = {
        count: 0,
        increment() {
          this.count++
        }
      }

      constructor() {
        super()
        this.innerHTML = /*html*/`
          <p>{{ count }}</p>
          <button @click="increment">Increment</button>
        `
        this.#app = Vue.createApp(this.state)
        this.#app.mount(this)
      }

      disconnectedCallback() {
        this.#app.unmount()
      }
    }    

    window.customElements.define('app-foo', AppComponent)
  </script>
</body>

Simple Wrapper

Personally though, I like to wrap this functionality so it's easier to write. Here I create a defineComponent function that will register a component.

const template = /*html*/`
  <h1>{{ title }}</h1>
  <p>{{ count }}</p>
  <button @click="increment">Increment</button>
`
class FooComponent {
  title = 'default'
  count = 0

  increment() {
    this.count++
  }
}

defineComponent({
  tag: 'app-foo',
  template,
  model: FooComponent,
  props: ['title']
})

And the implementation of defineComponent. It's not perfect. As you can imagine there are lots of things I would add to production code - like context, outputs and value props, but it's a simple demonstration.

import * as Vue from 'https://unpkg.com/petite-vue?module'

function defineComponent({
  template,
  tag,
  model,
  props = [],
}) {
  window.customElements.define(tag, class extends HTMLElement {
    #app = undefined

    constructor() {
      super()
      this.innerHTML = template
    }

    connectedCallback() {
      if (this.#app) {
        this.#app.unmount()
        this.#app = undefined
      }
      const vm = new model
      for (const prop of props) {
        let value = this.getAttribute(prop)
        Object.defineProperty(vm, prop, {
          get:() => {
            return value
          },
          set: (update) => {
            if (value === update) return
            this.setAttribute(prop, value)
            value = update
          }
        })
      }
      this.#app = Vue.createApp(vm)
      this.#app.mount(this)
    }

    disconnectedCallback() {
      this.#app.unmount()
      this.#app = undefined
    }
  })
}

For production I would also implement this as a decorator for TypeScript

@Component({
  tag: 'app-foo',
  template: /*html*/`
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  `,
})
class FooComponent {
  @Context() value = 'from context'
  @Input() title = 'default'
  count = 0

  increment() {
    this.count++
  }
}

sqllyw · 2022-04-21T22:51:59Z

sqllyw
Apr 21, 2022

How difficult it is to do the same thing without PVue?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using PVue with CustomElements (with examples) #130

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Using PVue with CustomElements (with examples) #130

alshdavid Feb 15, 2022

Simple Example

Simple Wrapper

Replies: 1 comment

sqllyw Apr 21, 2022

alshdavid
Feb 15, 2022

sqllyw
Apr 21, 2022