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: about 1 month 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 (5 months ago)
• Default Branch: main
• Last Pushed: 2024-10-20T14:08:09.000Z (2 months ago)
• Last Synced: 2024-10-29T18:06:05.428Z (about 2 months ago)
• Topics: acf, acf-block, i18n, vite, vue3, wordpress, wpml, wpml-ready
• Language: JavaScript
• Homepage:
• Size: 26.4 KB
• Stars: 0
• 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.

## 🌶️ Auto-imports

I have set up auto-imports for components, composables, Vue.js APIs, and your utilities inside the ``utils`` folder. You can use these in your application without explicitly importing them.

Contrary to a classic global declaration, it will preserve typings, IDEs completions and hints, and only includes 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

Use the `__("Translatable string")` function in your SFC files to make strings translatable.

```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") }}


```