This package contains editor-only part of Laraberg that can be implemented in your Vue.js app. For the backend, using Laraberg is required.
Its API can handle cookie-based authentications nicely (for example, Laravel Sanctum). You can edit src/js/api/api-fetch.js
in case you need to deal with API calls (such as token-based auths). Read development section below for more details in this case.
Simply run the following command:
npm install --save laraberg-vue
You can examine a working project in Laraberg Vue Example repository.
Import and use the plugin. You may need to consider your backend API endpoint URL for Laraberg in the prefix
option:
import Vue from 'vue'
import LarabergVue from 'laraberg-vue';
Vue.use(LarabergVue, {
// Base URL of your API endpoint and Laraberg controller prefix
prefix: 'https://api.example.com/laraberg',
})
You can pass other Laraberg options too. It's also possible to easily register your custom blocks. See Laraberg Vue Example project for advanced usage.
Now, use it in your template:
<template>
<laraberg-editor v-model="html"/>
</template>
<script>
export default {
data: () => ({
html: `
<!-- wp:heading -->
<h2>Welcome</h2>
<!-- /wp:heading -->
`
}),
}
</script>
This package is based on Laraberg frontend sources and under the hood, these both use Wordpress Gutenberg editor. Only a single Gutenberg editor can present on the page at the time.
Building the package from source directory needs some more steps and that's because of how Gutenberg should be built (>250MB). I'm taking instructions from here:
1- Clone this repository:
git clone [email protected]:evryn/laraberg-vue.git
2- Download Wordpress Gutenberg v8.1, extract it into a directory
3- In extracted directory, build Wordpress Gutenberg and link it to your global node_modules:
npm install
npm run build
sudo npm link
4- Go back to this project's cloned directory and link global gutenberg to local node_modules:
npm install
npm link gutenberg
โ NOTE: If you need other packages to install, it's good idea to remove
gutenberg
link from local node_modules and link it after installation. Or else, you may need to go through step 1 with those time consuming tasks.
Now you can do your changes. You may serve and preview it with:
npm run serve
At the end, build final assets into dist
directory:
npm run build