symfony - Load Vue 3 Component inside mounted div and pass PHP data

Question

I'm currently working on a new project where I have to integrate Vue 3 in a large Symfony/Drupal project. The project already contains a lot of PHP code and actually I don't want to refactor too much to begin with.

Well I tried setting up a very small piece of Vue code to see how I could start working on the rest of the code. Actually I just want some PHP code to be transferred from index.html.twig to the sidebar.vue file. I also work with Webpack Encore by the way from Symfony. I read that I could use Vue components to achieve this but my components are not loaded inside my <div id="app"></div>. Or atleast not how I want them to load.

webpack.config.js (Webpack Encore)

var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('webroot/public/build/')
    .setPublicPath('/public/build')

    .addEntry('main', './vue/src/main.js')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()


    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    .enableSassLoader()
    .enablePostCssLoader()

    // enables Vue
    .enableVueLoader(() => {}, {
        version: 3,
        runtimeCompilerBuild: false,
    });
;

module.exports = Encore.getWebpackConfig();

main.js

import { createApp } from 'vue';
import Sidebar from './components/sidebar';


const app = createApp({})

app.component('sidebar', Sidebar);

app.mount("#app");

sidebar.vue

<template>
    <h1>Sidebar</h1>
</template>

<script>
export default {
    name: 'Sidebar',
};
</script>

<style lang="scss" module>

</style>

index.html.twig

<div id="app"> <!-- The vue #app is loaded --> 
    <sidebar></sidebar> <!-- This is not loading -->
</div>

<!-- If it's loading I want to setup something like this -->

<div id="app"> <!-- The vue #app is loaded --> 
    <sidebar :item="{{ $item }}"></sidebar> <!-- This is not loading -->
</div>

{{ encore_entry_script_tags('main') }}

---

So how can I make <sidebar></sidebar> to load inside the HTML/Twig file? In the next step I would like to pass some PHP data on the <sidebar> component so I can read it inside the sidebar.vue file. Something like: <sidebar :item="{{ $item }}"></sidebar> I'm not entirely sure if this is possible with my current setup but I would love to see it work like this or in a similar way.

Answer 1

It seems like I'll have to use the runtimeCompilerBuild. That solves the problem. When false Vue can only be used with single file components which performs better but is less suitable for my application at the moment.

.enableVueLoader(() => {}, {
   version: 3,
   runtimeCompilerBuild: true,
});

Instead of

runtimeCompilerBuild: false;

Answer 2

In your main.js do :

app.mount("sidebar");

instead of

app.mount("#app");