I already have my url, api_key and api_secret. But whenever I call the API it throws CORS policy error.

Asking this question here as well as on stackoverflow.

I am trying to develop settings using Vite as a frontend bundler with Vue and TailwindCSS to create custom WordPress themes.

My ultimate goal is to have JS and CSS files split into chunks that are used on demand, aka. on specific page templates or custom post types etc.

Currently, I have tried headless WP, tried also creating static .html files with Vue sprinkled into them, tried Vue Single File Components as Custom Elements, but all of that is just generating a single JS bundle, along with a single CSS file, which can be rather large.

My main concern is the SEO part of WordPress, as it currently provides a lot of benefits for websites.

I beg you for any inputs or tips or whatever you think might work.

Thank you in advance.

Best regards,

Mega Aleksandar

Can anyone lead me to any information that could help me on integrating Gutenberg blocks to my Headless frontend running on Vue? (Nuxt.js framework).

The problem is that I can’t apply any scripts to my rendered blocks that I output in the following way:

<Header :class="urlTeam"></Header>

<div v-html="data.content" />

<Footer></Footer>

All the Gutenberg blocks render here via WPGraphQL plugin (v-html=”data.content”) but I can’t access any Vue components inside.

So if I build a custom Gutenberg block and use Vue markup inside – it just won’t work, I can’t apply any JS scripts to the content rendered that way.

Nothing complex, I just need to be able to use a carousel functionality inside Gutenberg editor, and use on click method for some spoilers components.

Appreciate any help or tips that could help me in advance!

If i chose this way the route like /en /de are broken.

Is there a solution to solved that ?

Is there a chance you’d let me have the vue source files?

I’d like to bring some adjustments of my own to the builder.

Thanks a lot,
Alex

I am building a wordpress headless site (frontend using Nuxt.js) and am trying to use recaptcha v3 in contact form 7 . I have already setup the integration using the built in integration.

But, the problem is contact form 7 is marking all of my emails as spam. Therefore I installed Flamingo plugin just to see the error log. Apparently the error log says reCAPTCHA response token is empty. Which makes sense because the recaptcha is setup in WordPress while since my frontend is decoupled, it doesn’t get the token.

I have read about using vue-recaptcha but that means setting up a new recaptcha that is entirely separate from the recaptcha I setup in WordPress. I can’t find a way to link the recaptcha for WordPress and my frontend together.

Any advise would be very much appreciated, thanks!

I am using jetmenu from crocoblock and wanted to test amelia on my environment but it claashes with jetmenu as I believe it is using the vue as well.

I happened to come across that there is a way of using the loaded vue from here.
https://www.ads-software.com/support/topic/backend-doesnt-load/

I tried it but even if I turned that on (or off), the error doesnt go away and amelia is not loading.
only way to get it worked is to deactivate the jetmenu which is not an option for me..

do you have any idea how to solve this issue?

Thank you

[Vue warn]: Cannot find element: #arve-sc-vue
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

Thanks

I am a pretty new WordPress user but i have coded for a while. I successfully in integrated my Vue application to WordPress via plugin. The problem that i faced is that there are some plugin’s css that interfered with my application style which mostly i have fixed. In my case it is elementor and divi plugins.

All the icons that i have in the page is automatically rendered as checkbox. The first ‘checkbox’ on the page should be radio’s and if you click next to view the other cards you will only see checkboxes…

Checking the element’s css i can see that divis’s css is being applied to it since it has the class name v-icon.

I am not sure how i can fix this the smoothest way.

The second minor problem that i have is that i would like to be able to remove the footer entirely. I tried going to customize additional css and put this in:

.page-id-2627 #page-container .ekit-template-content-footer{
display: none;
}

But it had no effect. Any suggestions would be appreciated.