Pinegrow Headless Wordpress Plugin
@pinegrow/headless-wordpress to your project
bash
Using npm
npm install -D @pinegrow/headless-wordpress
Using pnpm
pnpm add -D @pinegrow/headless-wordpress
`
2. Configure: Add wordpress along with an optional dataPath as options to liveDesigner in your config.
`js
//vite.config.[js,ts]
export default defineConfig({
plugins: [
liveDesigner({
// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
//...
wordpress: {
/ PinegrowWordpressModuleOptions (for more details, refer to Options section below) /
/ Please ensure that you update the filenames and paths to accurately match those used in your project. /
// dataPath: false, // Set to false to turn off addition of data fetching composable(s) to the project. To customize the path, set to an absolute or relative path, default is 'data/pg-wordpress/query.ts'.
},
}),
//...
],
//...
})
`
`js
//nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@pinegrow/nuxt-module',
//...
],
pinegrow: {
liveDesigner: {
// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
//...
wordpress: {
/ PinegrowWordpressModuleOptions (for more details, refer to Options section below) /
/ Please ensure that you update the filenames and paths to accurately match those used in your project. /
// dataPath: false, // Set to false to turn off addition of data fetching composable(s) to the project. To customize the path, set to an absolute or relative path, default is 'data/pg-wordpress/query.ts'.
},
},
},
//...
})
`
`js
//iles.config.ts
import type { LiveDesignerOptions } from '@pinegrow/vite-plugin'
export default defineConfig({
modules: [
[
'@pinegrow/iles-module',
{
liveDesigner: {
// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
//...
wordpress: {
/ PinegrowWordpressModuleOptions (for more details, refer to Options section below) /
/ Please ensure that you update the filenames and paths to accurately match those used in your project. /
// dataPath: false, // Set to false to turn off addition of data fetching composable(s) to the project. To customize the path, set to an absolute or relative path, default is 'data/pg-wordpress/query.ts'.
},
} as LiveDesignerOptions,
},
],
//...
],
//...
})
`
`js
//astro.config.[mjs]
import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'
import Pinegrow from '@pinegrow/astro-module'
export default defineConfig({
integrations: [
vue(),
Pinegrow({
liveDesigner: {
// For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
//...
wordpress: {
/ PinegrowWordpressModuleOptions (for more details, refer to Options section below) /
/ Please ensure that you update the filenames and paths to accurately match those used in your project. /
// dataPath: false, // Set to false to turn off addition of data fetching composable(s) to the project. To customize the path, set to an absolute or relative path, default is 'data/pg-wordpress/query.ts'.
},
},
}),
//...
],
//...
})
`
3. Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
4. Data Fetching - Pinegrow Headless Wordpress addon adds data fetching composable(s) at the location specified by the dataPath option (default: data/pg-wordpress/query.ts).
Options
`ts
interface PinegrowWordpressModuleOptions {
/**
* Absolute or relative path.
* @default 'data/pg-wordpress/query.ts'
* Set to false to turn off addition of data fetching composable(s) to the project
*/
dataPath?: string | boolean
}
interface PinegrowWordpressModule {
/**
* Pinegrow Headless Wordpress Plugin Options, added within liveDesigner in vite/nuxt/quasar/iles/astro config files
*/
wordpress: PinegrowWordpressModuleOptions
}
``