Modules

Getting started with DruxtSite

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

Think of the DruxtSite module as a distribution of Drupal, Nuxt and Druxt to provide 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 a single repository, or exist in seperate repositories.

For an example of a single repository, see the Quickstart DruxtSite repository.
For an example of individual repositories, see:
- Umami demo Nuxt repository
- Umami demo Drupal repository

Drupal

Install Drupal
Download the Drupal Druxt module:
```
composer require drupal/druxt
```
Install the module:
Add the "access druxt resources" permission to a user/role:

Nuxt

Install Nuxt
```
npx create-nuxt-app [destination]
```
Install the Site module:
```
npm i druxt-site
```

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

export default {
  modules: [
    'druxt-site'
  ],

  druxt: {
    baseUrl: 'https://demo-api.druxtjs.org'
  }
}

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

Add the DruxtSite component to your page or layout:

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

Start Nuxt: npm run dev