how to add vue components to the theme

[holygekko]

I'd like to add vue components to the theme. I've got esbuild-plugin-vue3 to work with javascript/scripts.js as a starting point, but i'm not sure how to incorporate this with the rest of the theme.

E.g. esbuild-plugin-vue3 generates a js file and a css file, both in the same dir. Should i move the css file to the tailwind/custom folder and include it in tailwind.css?

Do you have any suggestions how to go about this?

[gregsullivan]

I don't have any specific experience with Vue components, but you're right: The CSS file will need to be manually added to the theme. I would move it to ./tailwind/custom/components/[filename].css. If you put it in the components folder, it will automatically be added, as all files in that folder are included. If you need to modify the styles in that file, you can use things like @apply as well.

[gregsullivan]

(I've converted this to a discussion—happy to continue the conversation here if you have other questions!)

[holygekko]

I think i figured it out:

I created a esbuild.config.js It:

• moves the css to the right place after building or rebulding (with watch)
• if --w or --watch argument is given it creates a watch object with a callback after each rebuild
• set minify to true if --minify argument is given
• it sets the right build parameters and includes the vue3 SFC transformer plugin

const esbuild = require('esbuild')
const vuePlugin = require("esbuild-plugin-vue3")
const fs = require('fs')

function moveCss() {
    let oldPath = 'theme/js/script.min.css'
    let newPath = 'tailwind/custom/components/vue-styles.css'

    fs.rename(oldPath, newPath)
}

// via https://stackoverflow.com/questions/4351521/how-do-i-pass-command-line-arguments-to-a-node-js-program
let watch = false
let minify = false

process.argv.forEach(function (val, index, array) {
    if (val === '--watch' || val === '--w') {
        watch = {
            onRebuild: (result) => {
                if (result?.warnings) console.log('esbuild watch warnings: ', result.warnings)
                if (result?.errors) console.log('esbuild watch errors: ', result.errors)
                else moveCss()
            }
        }
    }

    if (val === '--minify') minify = true
});

esbuild.build({
    entryPoints: ["javascript/script.js"],
    target: 'esnext',
    bundle: true,
    outfile: "theme/js/script.min.js",
    plugins: [vuePlugin()],
    watch,
    minify
})
    .then(() => {
        moveCss()
    })

Then in i adjusted the following npm scripts in package.json:

"scripts": {
		"development:esbuild": "node esbuild.config.js",
},

And installed esbuild-plugin-vue3

Then in script.js I created the following proof of concept:

import { createApp } from 'vue/dist/vue.esm-bundler.js'
import Test from './Test.vue'

const app = createApp({
  components: {
    Test
  }
})

app.mount('#page')

And in page.php added my vue component to the template (as an example):

<section id="primary">
	<main id="main">

		<test></test>
		<test></test>

		<?php

		/* Start the Loop */
		while (have_posts()) :

Almost forgot, I also changed tailwind.config.js, I added './javascript/**/*.vue' to the content option so TW also scans Vue files.

I'm not sure yet if mounting to #page is a good idea. Perhaps this wil have performance problems down the road? But this setup allows me to create vue components (for the menu for example) and add them here and there.

The reason I'm doing this is because I really like writing in vue and tailwind. So I want to do as much in html / css / js in vue and give them the data they need via php. This way I hope to separate data retrieval (from WP via php) and presentation (vue and tw) and not mix them as is the normal way with wp templating.

[gregsullivan]

This all makes sense to me! I haven't done it myself, but I had an idea that it might be possible to import the relevant CSS file in script.js and then use esbuild's CLI to move that to an appropriate location. But again, this isn't something I've tried.

Part of this hinges on your plans for that CSS file: Are you moving it to remain unedited, or do you want to make changes? Do you want to have it be part of the Tailwind build process, or do you want to include it separately in WordPress?

(And just to be clear, none of this is a criticism of your approach; I mean this more as a commentary on why I don't think there's a one-size-fits-all approach that I can add to _tw itself.)

[holygekko]

The only thing I didn't get working yet is the hot reloading. Do you have any suggestions for that?

[gregsullivan]

I haven't used Vue with WordPress, so this isn't in my wheelhouse. (I almost exclusively use Alpine.js.)

When I did use Vue, I used the Vue CLI directly.

The most I can say is that the Browsersync documentation might give you some inspiration in finding approach to integrating the Vue CLI with _tw's watch command.