-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Etienne Moureton
committed
Mar 11, 2024
1 parent
0e7fc3b
commit 4128d05
Showing
11 changed files
with
271 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
# WpCF7Form | ||
|
||
::: warning | ||
Requires [Application Credentials](/introduction/getting-started.html#config) | ||
::: | ||
|
||
The `WpCF7Form` component is used to create a form using the Contact Form 7 plugin in WordPress. | ||
|
||
### Usage | ||
|
||
```vue | ||
<WpCF7Form :id="formId" :wpcf7_unit_tag="unitTag" /> | ||
``` | ||
|
||
### Props | ||
|
||
- `id` (string | number): The ID of the form to be fetched from the WordPress API. | ||
- `wpcf7_unit_tag` (string): The unit tag for the form. | ||
|
||
### Behavior | ||
|
||
The `WpCF7Form` component fetches the form data from the WordPress API using the provided `id`. It then renders the form fields based on the fetched data. The form submission is handled by the `handleSubmit` function, which sends a POST request to the `/api/submit-form` endpoint with the form data. | ||
|
||
### Error Handling | ||
|
||
If there are any errors during the form submission, the error messages will be displayed next to the corresponding form fields. | ||
|
||
### Styling | ||
|
||
The `WpCF7Form` component uses the following CSS classes for styling: | ||
|
||
- `wpcf`: This class is applied to the form element. | ||
- `wpcf-field`: This class is applied to each form field. | ||
- `wpcf-field--${field.type}`: This class is applied to each form field, where `${field.type}` is the type of the form field (e.g., `text`, `email`, `submit`, etc.). | ||
- `wpcf-field-error`: This class is applied to the error message of each form field. | ||
|
||
You can override these classes in your CSS to customize the appearance of the form. For example: | ||
|
||
```css | ||
.wpcf { | ||
/* styles for the form */ | ||
} | ||
|
||
.wpcf-field { | ||
/* styles for the form fields */ | ||
} | ||
|
||
.wpcf-field--text { | ||
/* styles for text fields */ | ||
} | ||
|
||
.wpcf-field--email { | ||
/* styles for email fields */ | ||
} | ||
|
||
.wpcf-field--submit { | ||
/* styles for submit button */ | ||
} | ||
|
||
.wpcf-field-error { | ||
/* styles for error messages */ | ||
} | ||
``` | ||
|
||
Please note that these styles should be scoped to the component where the `WpCF7Form` is used to avoid affecting other components. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# useWpMenu | ||
|
||
::: warning | ||
Requires [Application Credentials](/introduction/getting-started.html#config) | ||
::: | ||
|
||
`useWpMenu` is a composable function that fetches a WordPress menu by its ID. It returns a Promise that resolves to a `Menu` object. | ||
|
||
## Usage | ||
```ts | ||
const menu = await useWpMenu({ menuId }) | ||
``` | ||
|
||
## Parameters | ||
|
||
- `menuId` (number): The ID of the WordPress menu to fetch. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
# useWpPage | ||
|
||
`useWpPage` is a composable function that fetches a WordPress page by its slug. It returns a Promise that resolves to a `Page` object. | ||
|
||
## Usage | ||
```ts | ||
const page = await useWpPage({ slug }) | ||
``` | ||
|
||
## Parameters | ||
|
||
- `slug` (string, optional): The slug of the WordPress page to fetch. If not provided, the current route path will be used. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
# useWpPost | ||
|
||
`useWpPost` is a composable function that fetches a WordPress post by its slug. It returns a Promise that resolves to a `Post` object. | ||
|
||
## Usage | ||
```ts | ||
const post = await useWpPost({ type, slug }) | ||
``` | ||
|
||
## Parameters | ||
|
||
- `type` (string, optional): The type of the WordPress post to fetch. Defaults to 'posts'. | ||
- `slug` (string, optional): The slug of the WordPress post to fetch. If not provided, the current route path will be used. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
# useWpPosts | ||
|
||
`useWpPosts` is a composable function that fetches a list of WordPress posts. It returns a Promise that resolves to an array of `Post` objects. | ||
|
||
## Usage | ||
```ts | ||
const posts = await useWpPosts({ type, maxItems, categories }) | ||
``` | ||
|
||
## Parameters | ||
|
||
- `type` (string, optional): The type of the WordPress posts to fetch. Defaults to 'posts'. | ||
- `maxItems` (number, optional): The number of posts to fetch. Defaults to 6. | ||
- `categories` (Array, optional): Array of categories to filter by. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
# Getting Started | ||
|
||
## Prerequisites | ||
|
||
- [Node.js](https://nodejs.org/) version 18 or higher. | ||
- An accessible Wordpress instance, with API enabled. | ||
- <Badge type="warning" text="Optional" /> [Wordpress Application credentials](https://make.wordpress.org/core/2020/11/05/application-passwords-integration-guide/) to use advanced features : | ||
- Menus | ||
- Contact form | ||
|
||
## Installation | ||
|
||
|
||
### Setup | ||
|
||
::: code-group | ||
|
||
```sh [npm] | ||
$ npm add -D nuxt-wp | ||
``` | ||
|
||
```sh [pnpm] | ||
$ pnpm add -D nuxt-wp | ||
``` | ||
|
||
```sh [yarn] | ||
$ yarn add -D nuxt-wp | ||
``` | ||
|
||
```sh [bun] | ||
$ bun add -D nuxt-wp | ||
``` | ||
::: | ||
|
||
::: code-group | ||
```ts [nuxt-config.ts] | ||
export default defineNuxtConfig({ | ||
modules: ['nuxt-wp'], | ||
}) | ||
``` | ||
::: | ||
|
||
|
||
|
||
### Config | ||
|
||
In order to work, you need to provide the API endpoint : | ||
|
||
::: code-group | ||
|
||
```sh [.env] | ||
WP_API_ENDPOINT=https://your-wordpress-site.com/wp-json | ||
``` | ||
|
||
```ts [nuxt-config.ts] | ||
export default defineNuxtConfig({ | ||
wordpress:{ | ||
apiEndpoint: 'https://your-wordpress-site.com/wp-json', | ||
}, | ||
}) | ||
``` | ||
::: | ||
|
||
If you want to use advances features, you need to provide Application Credentials too : | ||
|
||
::: code-group | ||
```sh [.env] | ||
WP_API_ENDPOINT=https://your-wordpress-site.com/wp-json | ||
WP_APPLICATION_USER=your-username | ||
WP_APPLICATION_PASSWORD=your-password | ||
``` | ||
|
||
```ts [nuxt-config.ts] | ||
export default defineNuxtConfig({ | ||
wordpress:{ | ||
apiEndpoint: 'https://your-wordpress-site.com/wp-json', | ||
applicationUser: 'your-username', | ||
applicationPassword: 'your-password' | ||
}, | ||
}) | ||
``` | ||
::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# Options | ||
|
||
## Available options | ||
|
||
| Option | Type | Default | Required | Description | | ||
|-----------------------|----------|---------|----------|-----------------------------------------------------------------------------| | ||
| `apiEndpoint` | string | `''` | Yes | The endpoint of your WordPress API. | | ||
| `additionalQueryParams` | string | `'&acf?_embed'` | No | Additional query parameters to append to the API requests. | | ||
| `applicationUser` | string | `''` | No | The username for the WordPress application. | | ||
| `applicationPassword` | string | `''` | No | The password for the WordPress application. | | ||
|
||
## Set options | ||
::: code-group | ||
```ts [nuxt-config.ts] | ||
export default defineNuxtConfig({ | ||
modules: ['nuxt-wp', { | ||
// options | ||
}], | ||
|
||
// Or | ||
|
||
wordpress: { | ||
// options | ||
} | ||
}) | ||
``` | ||
::: |
Oops, something went wrong.