https://github.com/decipher/demo-drupal-vuews
Viewing Views in Vue with DruxtJS
https://github.com/decipher/demo-drupal-vuews
Last synced: 5 days ago
JSON representation
Viewing Views in Vue with DruxtJS
- Host: GitHub
- URL: https://github.com/decipher/demo-drupal-vuews
- Owner: Decipher
- Created: 2021-02-27T21:45:07.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T05:50:57.000Z (over 2 years ago)
- Last Synced: 2025-04-08T14:18:28.677Z (12 months ago)
- Language: Vue
- Size: 470 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Decoupled Views
_Viewing Views in Vue with DruxtJS!_
## Part 1 - Setup Drupal 9 (Quickstart).
Download and install **Drupal** using **Composer**, **`quick-start`** and the **Umami installation profile**.
1. Ceate Drupal 9 codebase:
```
yes | composer create-project -s dev drupal/recommended-project:9.1.x drupal-9 && cd $_
```
2. Add [JSON:API Views](https://www.drupal.org/project/jsonapi_views) module:
```
composer require drupal/jsonapi_views
```
3. Quickstart Drupal installation (Umami profile):
```
php -d memory_limit=-1 web/core/scripts/drupal quick-start demo_umami
```
4. Install JSON:API Views module:
http://127.0.0.1:8888/admin/modules#edit-modules-other
TL;DR
```
yes | composer create-project -s dev drupal/recommended-project:9.1.x drupal-9 && cd $_ && composer require drupal/jsonapi_views && php -d memory_limit=-1 web/core/scripts/drupal quick-start demo_umami
```
## Part 2 - Backend demonstration.
Demonstrate the **JSON:API Views** module functionality using the **Recipes** view.
1. Compare Views UI / JSON:API Views:
- Views UI: http://127.0.0.1:8888/admin/structure/views/view/recipes
- JSON:API Views: http://127.0.0.1:8888/jsonapi/views/recipes/default
`/jsonapi/views/{{ viewId }}/{{ display }}`
- http://127.0.0.1:8888/jsonapi/views/recipes/default
- http://127.0.0.1:8888/jsonapi/views/recipes/page_1
2. Modify view: http://127.0.0.1:8888/admin/structure/views/view/recipes
* [ ] Change pagination settings to 6 items per page.
* [ ] Expose **Authored on** / `created` sort as **Date**.
* [ ] Remove **ID** / `nid` sort.
* [ ] Add and expose **Title** / `title` sort.
* [ ] Add and expose **Ingredients** / `field_ingredients_value` filter with `Contains` operator.
3. Demo Pagination query:
Next / Previous links included in JSON:API.
`/jsonapi/views/{{ viewId }}/{{ display }}?page={{ page }}`
- http://127.0.0.1:8888/jsonapi/views/recipes/page_1?page=0
- http://127.0.0.1:8888/jsonapi/views/recipes/page_1?page=1
4. Demo Sorting query:
`/jsonapi/views/{{ viewId }}/{{ display }}?views-sort[sort_by]={{ sort }}&views-sort[sort_order]={{ ASC|DESC }}`
- http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-sort[sort_by]=title
- http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-sort[sort_by]=title&views-sort[sort_order]=DESC
5. Demo Exposed filters query:
`/jsonapi/views/{{ viewId }}/{{ display }}?views-filter[{{ filter }}]={{ value }}`
- http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-filter[field_ingredients_value]=chicken
- http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-filter[field_ingredients_value]=egg
### Part 3 - Setup Druxt in Drupal.
Download and install the **DruxtJS** Drupal module, so a frontend can be connected to the backend.
1. Add DruxtJS Drupal module:
```
composer require drupal/druxt:^1.0@beta
```
2. Install DruxtJS module:
http://127.0.0.1:8888/admin/modules#module-druxt
3. Add `Access DruxtJS JSON:API resources` permission:
http://127.0.0.1:8888/admin/people/permissions/anonymous#module-druxt
### Part 4 - Setup Nuxt.js.
Download and install **Nuxt.js** and required Nuxt modules.
1. Create Nuxt codebase:
```
npx create-nuxt-app nuxt && cd $_
```
2. Add [Druxt Views](https://views.druxtjs.org) module:
```
yarn add druxt-views
```
or
```
npm i druxt-views
```
3. Install and configure module:
`nuxt.config.js`
```
modules: [
...
'druxt-views',
],
druxt: {
baseUrl: 'http://127.0.0.1:8888',
},
```
4. (optional) Add @nuxtjs/proxy.
```
yarn add -D @nuxtjs/proxy
```
or
```
npm i -D @nuxtjs/proxy
```
`nuxt.config.js`
```
modules: [
...
'@nuxtjs/storybook',
],
proxy: {
'/sites/default/files': 'http://127.0.0.1:8888'
},
```
5. (optional) Add @nuxtjs/storybook.
```
yarn add -D @nuxtjs/storybook
```
or
```
npm i -D @nuxtjs/storybook
```
6. (optional) Add nuxt-storybook-proxy.
_Included in repo, @see https://github.com/nuxt-community/storybook/issues/235_
```
modules: [
...
'~/../assets/nuxt-storybook-proxy',
]
```
TL;DR
```
npx create-nuxt-app nuxt && cd $_ && npm i druxt-views @nuxtjs/proxy && npm i -D @nuxtjs/storybook
```
`nuxt.config.js`
```
modules: [
'@nuxtjs/proxy',
'druxt-views',
'~/../assets/nuxt-storybook-proxy',
],
druxt: {
baseUrl: 'http://127.0.0.1:8888',
},
proxy: {
'/sites/default/files': 'http://127.0.0.1:8888'
},
```
### Part 5 - Frontend demonstration.
1. Run Nuxt.
```
yarn dev
```
or
```
npm run dev
```
2. (optional) Run Storybook.
```
yarn nuxt storybook
```
or
```
npx nuxt storybook
```