How vue works in blade

[dtchkoidze]

Hello. I can't understand how is package shop or admin able to make use of vue in the blade files via <script>. I've worked with Vue SFCs but this way of working with vue is a bit strange.

Can anyone be so kind and guide me through how does it work? It'd be good if you could explain from start to finish, for example, if I were to create a new package, how should I set up vite app js for them to be able to render vue scripts inside blade files.

Thanks in advance

[suraj-webkul]

Hi dtchkoidze,

Thank you for your question. For more detailed discussions and support, we recommend using our dedicated forums. You can find a lot of helpful resources and get answers from the community there.

Please visit: Bagisto Forums

[suraj-webkul]

For now
We have a file named app.js which is available in shop and admin package.
in this file we are created an app(window.app) object of createApp which is root instance of application and this app object is mounted into

For shop package

packages/Webkul/Shop/src/Resources/views/components/layouts/index.blade.php

For admin package

packages/Webkul/Admin/src/Resources/views/components/layouts/index.blade.php

with the window load event listner means when all the dom loaded then mount the app.

As you said that you worked on SFC.
then the below code snippet will act as script tag.

    <script type="module">
        app.component('v-test', {
            template: '#v-test-template',
        });
    </script>

the below code snippet will act as template part of .vue file.

    <script
        type="text/x-template"
        id="v-test-template"
    >
    </script>

and you can use the component as below code snippet provided.

<v-test></v-test>

[suraj-webkul]

For vite configurations you can visit:
https://devdocs.bagisto.com/2.x/packages/assets.html

[dtchkoidze]

Thanks for the reply, all sorted out!