{"id":16264750,"url":"https://github.com/decipher/demo-drupal-vuews","last_synced_at":"2026-03-18T18:42:22.768Z","repository":{"id":139477364,"uuid":"342964729","full_name":"Decipher/demo-drupal-vuews","owner":"Decipher","description":"Viewing Views in Vue with DruxtJS","archived":false,"fork":false,"pushed_at":"2023-12-15T05:50:57.000Z","size":481,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T14:18:28.677Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Decipher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-27T21:45:07.000Z","updated_at":"2021-03-25T06:48:13.000Z","dependencies_parsed_at":"2024-11-04T22:41:38.418Z","dependency_job_id":"e4493d94-7a25-4340-b4aa-b05cc0083040","html_url":"https://github.com/Decipher/demo-drupal-vuews","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"aa885ce7f6dae6bcdbea5c7b8ecaefa6783638ea"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Decipher/demo-drupal-vuews","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Decipher%2Fdemo-drupal-vuews","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Decipher%2Fdemo-drupal-vuews/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Decipher%2Fdemo-drupal-vuews/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Decipher%2Fdemo-drupal-vuews/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Decipher","download_url":"https://codeload.github.com/Decipher/demo-drupal-vuews/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Decipher%2Fdemo-drupal-vuews/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28624341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T02:47:06.670Z","status":"ssl_error","status_checked_at":"2026-01-21T02:45:44.886Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T17:02:10.337Z","updated_at":"2026-01-21T03:02:47.532Z","avatar_url":"https://github.com/Decipher.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Decoupled Views\n_Viewing Views in Vue with DruxtJS!_\n\n\n## Part 1 - Setup Drupal 9 (Quickstart).\n\nDownload and install **Drupal** using **Composer**, **`quick-start`** and the **Umami installation profile**.\n\n1. Ceate Drupal 9 codebase:\n\n   ```\n   yes | composer create-project -s dev drupal/recommended-project:9.1.x drupal-9 \u0026\u0026 cd $_\n   ```\n\n2. Add [JSON:API Views](https://www.drupal.org/project/jsonapi_views) module:\n\n    ```\n    composer require drupal/jsonapi_views\n    ```\n\n3. Quickstart Drupal installation (Umami profile):\n\n    ```\n    php -d memory_limit=-1 web/core/scripts/drupal quick-start demo_umami\n    ```\n\n4. Install JSON:API Views module:\n\n    http://127.0.0.1:8888/admin/modules#edit-modules-other\n\n\nTL;DR\n```\nyes | composer create-project -s dev drupal/recommended-project:9.1.x drupal-9 \u0026\u0026 cd $_ \u0026\u0026 composer require drupal/jsonapi_views \u0026\u0026 php -d memory_limit=-1 web/core/scripts/drupal quick-start demo_umami\n```\n\n## Part 2 - Backend demonstration.\n\nDemonstrate the **JSON:API Views** module functionality using the **Recipes** view.\n\n1. Compare Views UI / JSON:API Views:\n    - Views UI: http://127.0.0.1:8888/admin/structure/views/view/recipes\n    - JSON:API Views: http://127.0.0.1:8888/jsonapi/views/recipes/default\n\n    `/jsonapi/views/{{ viewId }}/{{ display }}`\n\n    - http://127.0.0.1:8888/jsonapi/views/recipes/default\n    - http://127.0.0.1:8888/jsonapi/views/recipes/page_1\n\n2. Modify view: http://127.0.0.1:8888/admin/structure/views/view/recipes\n    * [ ] Change pagination settings to 6 items per page.\n    * [ ] Expose **Authored on** / `created` sort as **Date**.\n    * [ ] Remove **ID** / `nid` sort.\n    * [ ] Add and expose **Title** / `title` sort.\n    * [ ] Add and expose **Ingredients** / `field_ingredients_value` filter with `Contains` operator.\n\n3. Demo Pagination query:\n\n    Next / Previous links included in JSON:API.\n\n    `/jsonapi/views/{{ viewId }}/{{ display }}?page={{ page }}`\n\n    - http://127.0.0.1:8888/jsonapi/views/recipes/page_1?page=0\n    - http://127.0.0.1:8888/jsonapi/views/recipes/page_1?page=1\n\n4. Demo Sorting query:\n\n    `/jsonapi/views/{{ viewId }}/{{ display }}?views-sort[sort_by]={{ sort }}\u0026views-sort[sort_order]={{ ASC|DESC }}`\n\n    - http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-sort[sort_by]=title\n    - http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-sort[sort_by]=title\u0026views-sort[sort_order]=DESC\n\n5. Demo Exposed filters query:\n\n    `/jsonapi/views/{{ viewId }}/{{ display }}?views-filter[{{ filter }}]={{ value }}`\n\n    - http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-filter[field_ingredients_value]=chicken\n    - http://127.0.0.1:8888/jsonapi/views/recipes/page_1?views-filter[field_ingredients_value]=egg\n\n\n### Part 3 - Setup Druxt in Drupal.\n\nDownload and install the **DruxtJS** Drupal module, so a frontend can be connected to the backend.\n\n1. Add DruxtJS Drupal module:\n\n    ```\n    composer require drupal/druxt:^1.0@beta\n    ```\n\n2. Install DruxtJS module:\n\n    http://127.0.0.1:8888/admin/modules#module-druxt\n\n3. Add `Access DruxtJS JSON:API resources` permission:\n\n    http://127.0.0.1:8888/admin/people/permissions/anonymous#module-druxt\n\n\n### Part 4 - Setup Nuxt.js.\n\nDownload and install **Nuxt.js** and required Nuxt modules.\n\n1. Create Nuxt codebase:\n\n    ```\n    npx create-nuxt-app nuxt \u0026\u0026 cd $_\n    ```\n\n2. Add [Druxt Views](https://views.druxtjs.org) module:\n\n    ```\n    yarn add druxt-views\n    ```\n    or\n    ```\n    npm i druxt-views\n    ```\n\n3. Install and configure module:\n\n    `nuxt.config.js`\n    ```\n    modules: [\n      ...\n      'druxt-views',\n    ],\n\n    druxt: {\n      baseUrl: 'http://127.0.0.1:8888',\n    },\n    ```\n\n4. (optional) Add @nuxtjs/proxy.\n\n    ```\n    yarn add -D @nuxtjs/proxy\n    ```\n    or\n    ```\n    npm i -D @nuxtjs/proxy\n    ```\n\n    `nuxt.config.js`\n    ```\n    modules: [\n      ...\n      '@nuxtjs/storybook',\n    ],\n\n    proxy: {\n      '/sites/default/files': 'http://127.0.0.1:8888'\n    },\n    ```\n\n5. (optional) Add @nuxtjs/storybook.\n\n    ```\n    yarn add -D @nuxtjs/storybook\n    ```\n    or\n    ```\n    npm i -D @nuxtjs/storybook\n    ```\n\n6. (optional) Add nuxt-storybook-proxy.\n\n    _Included in repo, @see https://github.com/nuxt-community/storybook/issues/235_\n\n    ```\n    modules: [\n      ...\n      '~/../assets/nuxt-storybook-proxy',\n    ]\n    ```\n\nTL;DR\n```\nnpx create-nuxt-app nuxt \u0026\u0026 cd $_ \u0026\u0026 npm i druxt-views @nuxtjs/proxy \u0026\u0026 npm i -D @nuxtjs/storybook\n```\n\n`nuxt.config.js`\n```\n  modules: [\n    '@nuxtjs/proxy',\n    'druxt-views',\n    '~/../assets/nuxt-storybook-proxy',\n  ],\n\n  druxt: {\n    baseUrl: 'http://127.0.0.1:8888',\n  },\n\n  proxy: {\n    '/sites/default/files': 'http://127.0.0.1:8888'\n  },\n```\n\n\n### Part 5 - Frontend demonstration.\n\n1. Run Nuxt.\n\n    ```\n    yarn dev\n    ```\n    or\n    ```\n    npm run dev\n    ```\n\n2. (optional) Run Storybook.\n\n    ```\n    yarn nuxt storybook\n    ```\n    or\n    ```\n    npx nuxt storybook\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecipher%2Fdemo-drupal-vuews","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdecipher%2Fdemo-drupal-vuews","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecipher%2Fdemo-drupal-vuews/lists"}