Vue.js enhanced components

Comet Components is equipped with Vue SFC Loader to selectively load Vue components. This allows you to use Vue.js for specific components in a self-contained way, without needing to convert your entire application to Vue and without interfering with other existing JavaScript on your page (for example, WordPress form plugins often have their own JS that may not work if you try to load the form within a Vue component).

Use cases for this include:

Create a Vue-enhanced Comet Component

1. Create a new component as you would for a standard PHP component.
2. In your component's Blade template, add the data-vue-component attribute to the root element of your component. This will be the element that Vue mounts to. For example:

<div data-vue-component="responsive-panels">
</div>

3. In your component's directory, create a file with the kebab case name of your component, followed by .vue. For example, if your component is called ResponsivePanels, create a file called responsive-panels.vue and put the below boilerplate code into it, updating ResponsivePanels to the PascalCase name of your component:

<script lang="ts">
    export default {
        name: 'ResponsivePanels',
        inheritAttrs: true,
        props: {},
        data() {
            return {};
        },
        mounted() {
        },
        methods: {}
    };
</script>

<template>

</template>

<style lang="css">
	
</style>

4. Add a your-component.js file to the component directory. Copy and paste the code below into it:

import * as Vue from '../../plugins/vue-wrapper/src/vue.esm-browser.js';
import { loadModule } from '../../plugins/vue-wrapper/src/vue3-sfc-loader.esm.js';
import { vueSfcLoaderOptions, BASE_PATH } from '../../plugins/vue-wrapper/src/index.js';

Vue.createApp({
	components: {
		ResponsivePanels: Vue.defineAsyncComponent(() => {
			return loadModule(`${BASE_PATH}/src/components/ResponsivePanels/responsive-panels.vue`, vueSfcLoaderOptions);
		}),
	}
}).mount('[data-vue-component="responsive-panels"]');

Update to suit your component by:

• Updating ResponsivePanels on line 7 to the PascalCase name of your component
• Update the path to the .vue file on line 8 to the path to the file you just created in step 3
• Update the selector on line 11 to match what you put in your Blade template in step 2.

5. Add the your-component.js file to the dist.js build process in rollup.index.js in the core package root directory.

6. In your component's PHP render() method, add the props you want to pass to the Vue component. For example:

function render(): void {
	$blade = BladeService::getInstance();

	echo $blade->make($this->bladeFile, [
		'classes'    => $this->get_filtered_classes(),
		'attributes' => $this->get_html_attributes(),
		'breakpoint' => $this->breakpoint,
		'titles'     => $this->titles,
		'panels'     => $this->panels
	])->render();
}

7. In your component's Blade template, render the Vue component using its kebab-case tag and the props you passed through to the render method. For example:

<div data-vue-component="responsive-panels" @if ($classes) @class($classes) @endif>
    <responsive-panels 
    	@attributes($attributes) 
    	breakpoint="{{ $breakpoint }}" 
    	:titles="{{ json_encode($titles) }}"
        :contents="{{ json_encode($panels) }}">
    </responsive-panels>
</div>

8. Go into your .vue file and add the props you just added to the Blade template to the props of the component. For example:

<script lang="ts">
    import * as Vue from '../../plugins/vue-wrapper/src/vue.esm-browser.js';
    import type { PanelItem } from './types.ts';

    export default {
        name: 'ResponsivePanels',
        inheritAttrs: true,
        props: {
            titles: {
                type: Array as () => PanelItem[],
                required: true,
            },
            contents: {
                type: Array as () => PanelItem[],
                required: true,
            },
            breakpoint: String
        },
        // ... rest of your component script
    }
</script>

9. Add the component to the web-types.json file in the Core package root so that PhpStorm recognises the tag as a Vue component, rather than flagging it as an unknown HTML element, and intellisense picks up the props.

10. Go forth and build the rest of your Vue component!