dashpilot / vue-pagebuilder

A modular pagebuilder for Vue 3, uses ES Modules instead of single-file-components
https://vue-pagebuilder.vercel.app
137 stars 20 forks source link

How to use in PHP or Laravel Project without VUE? #3

Open mprince2k18 opened 7 months ago

mprince2k18 commented 7 months ago

@dashpilot

dashpilot commented 7 months ago

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.

mprince2k18 commented 7 months ago

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 commented 7 months ago

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.

dashpilot commented 7 months ago

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

mprince2k18 commented 7 months ago

Thanks, I will share the outcome.