0

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.

hakre
  • 193,403
  • 52
  • 435
  • 836
Keygun2k1
  • 145
  • 4
  • 12
  • Those are very broad questions. What have you tried to resolve your issue? What is your concrete question with that? – hakre Oct 29 '22 at 05:28
  • @hakre well I've already solved the problem which was quite simple. In the main project I've installed the 2 packages. The npm package exports a vue component which I can mount to the createapp in the main project. Then the only thing I needed to do was to call the vue component in a template file in the composer package which then can give all the additional data through props. – Keygun2k1 Oct 30 '22 at 09:11
  • Please add it as an answer, best with some short excerpts from this configuration so that it is visible next to the explanation why you did. You can then mark your question answered later on. This will help future visitors including your future self @Keygun2k1 – hakre Oct 30 '22 at 12:29
  • Thank you I'll add an answer immediately @hakre – Keygun2k1 Oct 30 '22 at 12:37

1 Answers1

0

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.

Keygun2k1
  • 145
  • 4
  • 12