I'm creating a wordpress package which uses acf (Advanced Custom Fields) to get and set the data.

Additional data about the usage:

First in your project's config.php file you set the settings for the composer package. Then in wordpress you can call the block "photoplayer". You can give the block some data and the data is accessible in the composer package.

But now comes my problem. The frontend needs to be in vuejs since this is a composer package and vue is a peerdependency vue isn't accessible because it's in the vendor folder. A hacky way which you don't want to do ever is to install the npm packages inside the package in the vendor folder (this will cause more problems because vue uses singleton). So I choose to make a vue package for this with npm.

Now I've just created the frontend inside a npm package, but how will i get the composer packages data to the npm package in the frontend?

I've thought of an API, but I think that that solution is to overcomplex for such a problem.

CodePudding user response：

Here's a solution to this problem:

Requirements:

• main project
• npm package (in my case created in vue)
• composer package

Here you'll find on how to create and use a local npm package.

Here you'll find on how to create and use a local composer package

First you'll need to install your local packages:

npm i path/to/package/package-name.tgz composer require path/to/package/

The npm package exports a component:

import MyVueComponent from "./MyVueComponent.vue";

export { MyVueComponent }

This makes it so that we can mount this vue component to the projects createapp:

import { createApp } from 'vue'
import { MyVueComponent } from "my/package";

const app = createApp({})

app.component('MyVueComponent', MyVueComponent)
app.mount('#app')

Now you can use the MyVueComponent as a custom html tag within your #app. Now in the composer package we create a template file something like template.php will do you can name it however you like. Within this template we call the vue component:

<my-vue-component
    :name-of-property="'Data you want to provide'"
    :name-of-second-prop="'More data'"
></my-vue-component>

Now I've passed some data to the props of the vue component. You can learn how to use props in vue here.

In my case showcasing the template is easily done using ACF and wordpress, but rendering a composer template file is a little out of scope here.