vue-pagebuilder icon indicating copy to clipboard operation
vue-pagebuilder copied to clipboard

How to use in PHP or Laravel Project without VUE?

Open mprince2k18 opened this issue 3 months ago • 6 comments

mprince2k18 avatar Apr 08 '24 08:04 mprince2k18

@dashpilot

mprince2k18 avatar Apr 08 '24 08:04 mprince2k18

Vue is loaded via the CDN, so you can easily use it in a php-environment (without node.js). I don't know what you want to achieve exactly, but if you rename index.html to index.php (or index.blade.php for Laravel) you can use it in any php/Laravel project. Let me know what you want to achieve exactly, and I'll try to help you out.

dashpilot avatar Apr 08 '24 10:04 dashpilot

Thank you for the help. My purpose is to build an online shop where I want to use your page builder to create dynamic sections or blocks. I have pre-designed blade components and the admin will make the frontend with the page builder.

mprince2k18 avatar Apr 08 '24 13:04 mprince2k18

Also, your project gave me hope to complete the purpose. If this builder works with Laravel and blade, I would love to contribute as well.

mprince2k18 avatar Apr 08 '24 13:04 mprince2k18

I've created an example on how you can use the editor with server-generated or inline HTML (e.g. php/laravel):

https://github.com/dashpilot/vue-pagebuilder/blob/main/test-inline.html

In this example, you could generate the Vue components using php/laravel, like so:

<div class="post editable"  :id="item.id" data-fields="title=txt&amp;body=rte">
<h2 v-text="item.title"></h2>
<p v-html="item.body"></p>
</div>

The components you generate on the server-side have to use the Vue template language (v-text, v-html), otherwise they can't be used with the pagebuilder.

Then you import the editor, create the app and mount it (see the example)

      import Editor from "./editor/editor.mjs";
      const app = Vue.createApp({
        data() {
          return {
            /* etc. */
          }
      });
      app.mount("#app");

I hope the example makes it clearer how you could approach this, let me know if you have any questions

dashpilot avatar Apr 08 '24 23:04 dashpilot

Thanks, I will share the outcome.

mprince2k18 avatar Apr 09 '24 04:04 mprince2k18