Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mprince2k18 opened this issue Apr 8, 2024 · 6 comments
Open

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

mprince2k18 opened this issue Apr 8, 2024 · 6 comments

Comments

@mprince2k18
Copy link
Contributor

No description provided.

@mprince2k18
Copy link
Contributor Author

@dashpilot

@dashpilot
Copy link
Owner

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Owner

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
Copy link
Contributor Author

Thanks, I will share the outcome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants