This is a PHP-based ACF Block boilerplate that incorporates Vuejs. The boilerplate helps you to use Vuejs in your custom block with minimal setup.
The block makes use of the new Interactive API introduced in WordPress 6.5.
The solution depends on the wp_interactivity_config
server function to set initial values and/or configuration.
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
- Install the dependencies in the local node_modules folder.
- Rename placeholder strings in files
- Copy or merge the content from the
example-functions.php
to your theme'sfunctions.php
file. You are free to delete theexample-functions.php
file.
- Use to compile and run the code in development mode.
- Watches for any changes and reports back any errors in your code.
- Check your source code for programmatic and stylistic errors.
- Format your source code
- Builds production code inside
dist
folder. - Will extract translatable strings from your code and generate the
languages/messages.php
file.
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
hook under the hood.
<script setup>
import ErrorBoundary from "@/components/ErrorBoundary.vue";
function handleErrorLog(err) {
console.log(err);
}
</script>
<template>
<ErrorBoundary @error="handleErrorLog">
<!-- --- -->
<template #error="{ error, clearError }">
<p>{{ error }}</p>
<button @click="clearError">Try Again</button>
</template>
</ErrorBoundary>
</template>
Use the __("Translatable string")
function in your SFC files to make strings translatable.
<script setup>
import { __, _x, _n, _nx } from "@/utils/i18n";
const message = __("This is a message from i18n!");
</script>
<template>
<h1>{{ __("Hello, World!") }}</h1>
<p>{{ message }}</p>
<p>{{ _n("%d person", "%d people", 2) }}</p>
<p>{{ _nx("%d person", "%d people", 2, "different context") }}</p>
<p>{{ _x("This is a message from i18n!", "different context") }}</p>
</template>