How to compile vue3 SFC component .ce.vue into .js

Viewed 125

I am looking for a way to compile a "single-file component" (.vue or .ce.vue extension) with console tools into a js. the project is made with yii2. here is what i tried:

Following this guide i managed to define a custom element (without SFC .vue):

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement only: CSS to be injected into shadow root
  styles: [`/* inlined css */`]
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

this guide mentions "Using Vue SFC as Custom Elements", but i have no clue how to run it, as well as this @vue/compiler-sfc.

using the library built with vitejs in library mode makes my (php) app throw

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

so what is the best way to build a SFC

MyTest.ce.vue

<template>
    <div>
        hello world
    </div>
</template>

<script>
    export default {
        tag:  'my-test',
        name: 'MyTest',
        data() {
            return { count: 0 }
        },
    };
</script>

<style scoped>
    div {
        font-size: 200%;
    }
</style>

into a .js that i can load in my app, preferably with a single command line tool, without webpack or similar?

0 Answers
Related