Site

DruxtSite gives you an out-of-the-box Drupal site experience with a Nuxt.js frontend.

DruxtSite combines Drupal, Nuxt and Druxt into a Vue.js theme layer for Drupal.

---

Quickstart - GitPod

Try out a pre-installed, pre-configured DruxtSite install with GitPod.

---

Getting started

All Druxt sites need both Drupal (backend) and Nuxt (frontend) to be installed.

Each codebase can live in its own directory within one repository, or exist in separate repositories.

• For an example combining both into one repository, see the Quickstart DruxtSite repository.
• For an example of individual repositories, see:
  • Umami demo Nuxt repository
  • Umami demo Drupal repository

---

Drupal

1. Install Drupal

2. Download the Drupal Druxt module:

   composer require drupal/druxt
   

3. Install the module:

4. Add the "access druxt resources" permission to a user/role:

---

Nuxt

1. Install Nuxt

   npx create-nuxt-app [destination]
   

2. Install the Site module:

   npm i druxt-site
   

3. Add the module and configuration to nuxt.config.js:

   export default {
     modules: ['druxt-site'],
   
     druxt: {
       baseUrl: 'https://demo-api.druxtjs.org',
     },
   };
   

   * Replace https://demo-api.druxtjs.org with your own Drupal backend.

4. Add the DruxtSite component to your page or layout:

   <template>
     <DruxtSite :theme="theme" />
   </template>
   

5. Start Nuxt: npm run dev