Skip to content

Commit

Permalink
Add initial nuxt3 version. Solves #93 (#99)
Browse files Browse the repository at this point in the history
* LDP-1851: Init a new Nuxt 3 module from Module starter template.

* LDP-1851: Make basic functionality work.

* LDP-1851: Add error handling and refactor.

* LDP-1851: Add messages store & add error handling for menus.

* LDP-1851: Add Breadcrumbs to playground page and fix double rendering on SSG.

* LDP-1851: Enable auto imports.

* LDP-1851: Add useDrupalCePage helper for using page data.

* LDP-1851: Support passing useFetch options to useDrupalCeFetchPage.

* LDP-1851: Add license file.

* LDP-1851: Update module version.

* LDP-1851: Update README.

* LDP-1851: Add docs for exported composables.

* LDP-1851: Set page state inside useDrupalCeFetchPage.

* LDP-1851: Use DRUPAL_BASE_URL env for setting baseURL if available.

* LDP-1851: Improve docs.

Co-authored-by: Matic Fink <[email protected]>
  • Loading branch information
fago and TurtlBbx authored Jan 27, 2023
1 parent 2bde80b commit 5fbeb58
Show file tree
Hide file tree
Showing 46 changed files with 10,457 additions and 13,344 deletions.
1 change: 0 additions & 1 deletion .editorconfig
100755 → 100644
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
# editorconfig.org
root = true

[*]
Expand Down
5 changes: 1 addition & 4 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
# Common
node_modules
dist
.nuxt
coverage
node_modules
10 changes: 10 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": [
"@nuxtjs/eslint-config-typescript"
],
"rules": {
"@typescript-eslint/no-unused-vars": [
"off"
]
}
}
10 changes: 0 additions & 10 deletions .eslintrc.js

This file was deleted.

57 changes: 52 additions & 5 deletions .gitignore
100755 → 100644
Original file line number Diff line number Diff line change
@@ -1,9 +1,56 @@
# Dependencies
node_modules
*.iml
.idea

# Logs
*.log*

# Temp directories
.temp
.tmp
.cache

# Yarn
**/.yarn/cache
**/.yarn/*state*

# Generated dirs
dist

# Nuxt
.nuxt
.vscode
.DS_Store
.output
.vercel_build_output
.build-*
.env
.netlify

# Env
.env

# Testing
reports
coverage
dist
*.lcov
.nyc_output

# VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets

# Intellij idea
*.iml
.idea

# OSX
.DS_Store
.AppleDouble
.LSOverride
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
1 change: 1 addition & 0 deletions .nuxtrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
typescript.includeWorkspace=true
100 changes: 31 additions & 69 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Please refer to https://stack.lupus.digital for more info.

## Setup

1. Add `nuxtjs-drupal-ce` dependency to your Nuxt.js project
1. Add `nuxtjs-drupal-ce` dependency to your Nuxt project

```bash
yarn add nuxtjs-drupal-ce # or npm install nuxtjs-drupal-ce
Expand All @@ -29,108 +29,70 @@ yarn add nuxtjs-drupal-ce # or npm install nuxtjs-drupal-ce
2. Add `nuxtjs-drupal-ce` to the `modules` section of `nuxt.config.js`

```js
{
buildModules: [
export default defineNuxtConfig({
modules: [
'nuxtjs-drupal-ce',
],
'drupal-ce', {
drupalCe: {
baseURL: 'https://your-drupal.example.com',
// more options...
}
}
})
```
3. Get started quickly by scaffolding initial files:
```bash
rm -f layouts/default.vue && $(npm bin)/nuxt-drupal-ce-init
```

You may also take a look at the [example project](https://github.com/drunomics/lupus-nuxtjs-drupal-stack-example).

## Options

- `baseURL`: The Drupal base URL. Defaults to the `DRUPAL_BASE_URL`
environment variable if provided, otherwise to `http://localhost:8888`.

- `menuEndpoint`: The menu endpoint pattern used for fetching menus. Defaults to 'api/menu_items/$$$NAME$$$' as fitting
to the API provided by the [Rest menu items](https://www.drupal.org/project/rest_menu_items) Drupal module.
`$$$NAME$$$` is replaced by the menu name being fetched.


## TODO list of options (not yet implemented)

- `addRequestFormat`: If set to `true`, the `_format=custom_elements` URL parameter
is added automatically to requests. Defaults to `true`.
is added automatically to requests. Defaults to `true`.

- `addRequestContentFormat`: If specified, the given value is added as `_content_format`
URL parameter to requests. Disabled by default.

- `addVueCompiler`: If enabled, the Vue compiler is added to the runtime build. This
is necessary if you want to render custom elements markup on runtime. Defaults to `true`.

- `menuEndpoint`: The menu endpoint pattern used for fetching menus. Defaults to 'api/menu_items/$$$NAME$$$' as fitting
to the API provided by the [Rest menu items](https://www.drupal.org/project/rest_menu_items) Drupal module.
`$$$NAME$$$` is replaced by the menu name being fetched. To enable menu fetching, un-comment the nuxtServerInit action
in `store/init.js`.

- `useLocalizedMenuEndpoint`: If enabled, the menu endpoint will use a language prefix as configured by [nuxtjs/i18n](https://i18n.nuxtjs.org) module. Defaults to `true`.

- `useProxy`: If set to `dev-only` and nuxt is in dev-mode, the module automatically
configures `/api` to the Drupal backend via
[@nuxtjs/proxy](https://github.com/nuxt-community/proxy-module) and uses it instead of
- `useProxy`: If set to `dev-only` and nuxt is in dev-mode, the module automatically
configures `/api` to the Drupal backend via
[@nuxtjs/proxy](https://github.com/nuxt-community/proxy-module) and uses it instead of
the Drupal backend, such that there are no CORS issues. Other values supported are
`always` or false.
Note: When using `always` the module must be added to the nuxt `modules` section instead
of the `buildModules` section.

- `axios`: Options to pass-through to the `drupal-ce`
[axios](https://github.com/nuxt-community/axios-module) instance.
Note: When using `always` the module must be added to the nuxt `modules` section instead
of the `buildModules` section.

- `customErrorPages`: By default, error pages provided by Drupal (e.g. 403, 404 page) are shown,
while keeping the right status code. By enabling customErrorPages, the regular Nuxt error
pages are shown instead, such that the pages can be customized with Nuxt. Defaults to `false`.

- `pageErrorHandler`: The default page error handler can be overridden. Example:
```javascript
pageErrorHandler (error, commit, context, options) {
context.error({
statusCode: error.response.status,
message: error.message
})
}
```

- `menuErrorHandler`: The default menu error handler can be overridden. Example:
```javascript
menuErrorHandler (error, commit, context, options) {
commit('addMessage', {
type: 'error',
message: `Custom menu error: ${error.message}.`
})
}
```
while keeping the right status code. By enabling customErrorPages, the regular Nuxt error
pages are shown instead, such that the pages can be customized with Nuxt. Defaults to `false`.

- `pageErrorHandler`: The default page error handler can be overridden.

## Known issues
- `menuErrorHandler`: The default menu error handler can be overridden.

### Decoding HTML entities in plain-text strings

Vue2 has [known problem](https://github.com/vuejs/vue/issues/8805) when decoding HTML entities
of plain-text strings that are delivered as custom element attributes. While it correctly decodes
some HTML-encoded characters, it does not handle all of them.
## Options not supported in 2.x version

The problem has been fixed in Vue3.
- `addVueCompiler`: This is necessary if you want to render custom elements markup on runtime.
If you need this, you may find a solution in this [GitHub issue](https://github.com/nuxt/nuxt/issues/13843).

#### Filter "decodeSpecialChars"

For Vue2, this nuxt-module provides a Vue filter that can be used to work-a-round the issue.
Consider "teaser-text" being a prop containing a plain-text string. In that case, it's
recommended to use the provided filter:
`{{ teaserText | decodeSpecialChars }}`
- `axios`: Options to pass-through to the `drupal-ce`
[axios](https://github.com/nuxt-community/axios-module) instance.


## Development

1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Start development server using `npm run dev`
## Testing
2. Install dependencies using `npm install`
3. Use `npm run dev` to start [playground](./playground) in development mode.
- Run `npm run dev:prepare` to generate type stubs.

Run `npm run test` or `yarn test`.

## License

Expand Down
11 changes: 0 additions & 11 deletions babel.config.js

This file was deleted.

41 changes: 0 additions & 41 deletions bin/nuxt-drupal-ce-init.js

This file was deleted.

5 changes: 0 additions & 5 deletions commitlint.config.js

This file was deleted.

4 changes: 0 additions & 4 deletions example/.gitignore

This file was deleted.

11 changes: 0 additions & 11 deletions example/nuxt.config.js

This file was deleted.

Loading

0 comments on commit 5fbeb58

Please sign in to comment.