https://github.com/taunoha/wp-acf-vue-block-boilerplate
This PHP-based ACF Block allows you to use a Vue-based stateful and reactive application in your custom block.
https://github.com/taunoha/wp-acf-vue-block-boilerplate
acf acf-block i18n vite vue3 wordpress wpml wpml-ready
Last synced: 15 days ago
JSON representation
This PHP-based ACF Block allows you to use a Vue-based stateful and reactive application in your custom block.
- Host: GitHub
- URL: https://github.com/taunoha/wp-acf-vue-block-boilerplate
- Owner: taunoha
- Created: 2024-07-23T13:32:16.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-21T16:55:43.000Z (6 months ago)
- Last Synced: 2025-06-21T09:45:02.529Z (22 days ago)
- Topics: acf, acf-block, i18n, vite, vue3, wordpress, wpml, wpml-ready
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue with ACF Block in WordPress
This is a PHP-based [ACF Block](https://www.advancedcustomfields.com/resources/blocks/) boilerplate that incorporates [Vuejs](https://vuejs.org).
The boilerplate helps you to use Vuejs in your custom block with minimal setup.
The block makes use of the new [Interactive API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#server-functions) introduced in WordPress 6.5.
The solution depends on the `wp_interactivity_config` server function to set initial values and/or configuration.
## Before you start
> [!NOTE]
> Prerequisites
> * Familiarity with the command line
> * Install [Node.js](https://nodejs.org/en) version 20.0 (LTS) or higher LTS
Please add a new folder to your theme folder and move the code into it.
For example: `wp-content/themes/my-theme/blocks/my-block`
To finish the setup, go to the newly created folder and follow these steps:
**Remove:**
* .git folder
### 👉 `npm install`
* Install the dependencies in the local node_modules folder.
### 👉 `npm run rename`
* Rename placeholder strings in files
* Copy or merge the content from the `example-functions.php` to your theme's `functions.php` file. You are free to delete the `example-functions.php` file.
## Development
### 👉 `npm run dev`
* Use to compile and run the code in development mode.
* Watches for any changes and reports back any errors in your code.
### 👉 `npm run lint`
* Check your source code for programmatic and stylistic errors.
* Format your source code
### 👉 `npm run build`
- Builds production code inside `dist` folder.
- Will extract translatable strings from your code and generate the `languages/messages.php` file.
## ❗️ Deploy
The `dist` folder will be overridden each time you run `npm run build` or `npm run dev`. Do not commit this folder to version control. If you use any CI/CD pipeline, make sure to trigger the build process as part of your deployment workflow.
## 🌶️ Auto-imports
I have set up auto-imports for components, composables, Vue.js APIs, and your utilities inside the ``utils`` folder. This includes:
- All components in your ``components`` folder
- All composables in your ``composables`` folder
- All utilities in your ``utils`` folder
- Core Vue.js APIs (ref, computed, watch, etc.)
- VueUse composables (useStorage, useMouse, useWindowSize, etc.)
You can use these in your application without explicitly importing them. For example:
```
components
├─ Icon
│ └─ Arrow.vue
└─ ErrorBoundary.vue
```
You can use these components in your templates as:
```html
```
Contrary to a classic global declaration, it will preserve typings, IDE completions, and hints and only include what is used in your code.
## <ErrorBoundary> component
This component handles errors happening in its default slot. It will prevent the error from bubbling up to the top level, and will render the #error slot instead.
It uses Vue's [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) hook under the hood.
```html
function handleErrorLog(err) {
console.log(err);
}
{{ error }}
Try Again
```
## i18n
To make strings translatable, use the `__("Translatable string")` function in your SFC files.
```html
const message = __("This is a message from i18n!");
{{ __("Hello, World!") }}
{{ message }}
{{ _n("%d person", "%d people", 2) }}
{{ _nx("%d person", "%d people", 2, "different context") }}
{{ _x("This is a message from i18n!", "different context") }}
```
### Translation Plugin Compatibility
This plugin is compatible with popular WordPress translation plugins like WPML, Polylang, or TranslatePress. The translation functions (`__()`, `_n()`, `_x()`, etc.) integrate with WordPress's translation ecosystem, allowing you to:
- Extract translatable strings using the plugins' string scanning features
- Manage translations through the plugins' translation interfaces
- Use the plugins' language switching functionality
- Maintain translations across different language versions of your site