Setup

As first step setup Drupal, then setup Nuxt.js and connect it to the Drupal backend:

Drupal

Drupal installation

If you don't have an existing Drupal installation yet, or you want to start from scratch, install Drupal and first:

composer create-project drupal/recommended-project drupal-demo
cd drupal-demo

If you do not have composer installed, see the official composer installation instructions.

Continue with the Drupal installation, e.g. by using Drupal's quick start command:

php ./web/core/scripts/drupal quick-start standard

The quick-start command uses PHP's built-in webserver to run your site. Just keep it running after installation.

If you prefer a full local development setup based upon docker, check the Local development guide.

Add drush - the Drupal cli:

composer require drush/drush
# If no global drush launcher is already in use, run
alias drush=$PWD/vendor/bin/drush

Adding the Custom Elements Renderer

The Lupus Custom Elements renderer module lets Drupal provide an API backend rendering custom elements. Add the module and its dependencies, then enable the module via the UI or if installed, via drush.

composer require drupal/lupus_ce_renderer:^2.0@beta drupal/custom_elements:^2.0@beta 
drush en lupus_ce_renderer -y
drush config:set custom_elements.settings markup_style vue-3

Test your installation by opening http://127.0.0.1:8888/?_format=custom_elements - when logged in, you should see a JSON response with the following content property:

<drupal-markup>Welcome to your custom-elements enabled Drupal site!</drupal-markup>

Nuxt.js

Nuxt.js installation

yarn create nuxt-app demo-frontend

npm init nuxt-app demo-frontend

Answer the questions as preferred, generally the defaults work fine. Once the project is created, you can remove the example components:

```bash rm pages/index.vue components/NuxtLogo.vue components/Tutorial.vue ```

For further details, please refer to the offical Nuxt.js installation docs.

Adding the connector module

The Drupal Custom Elements Connector module easily connects Nuxt.js with Drupal via the Custom Elements Renderer.

Add the nuxtjs-drupal-ce dependency to your project:

yarn add nuxtjs-drupal-ce

npm install nuxtjs-drupal-ce

Then, add nuxtjs-drupal-ce to the modules section of nuxt.config.js and set the Drupal base URL:

nuxt.config.js
{
  buildModules: [
    'nuxtjs-drupal-ce'
  ],
  'nuxtjs-drupal-ce': {
    baseURL: 'http://127.0.0.1:8888'
  }
}

Scaffold initial files

The Nuxt.js Drupal custom elements connector modules comes with a bunch of useful Vue components that help you to get started quickly:

$(npm bin)/nuxt-drupal-ce-init

Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.

Run nuxt

Ready to go! Start testing by running Nuxt.js in development mode:

yarn dev

npm run dev

Now, when accessing the nuxt dev server (e.g. at http://localhost:3000/) you should see a naked page rendered, having the "Home" breadcrumb and the message shown to logged-out users on the frontpage: "You are not authorized to access this page."

For deployment target configuration, please refer to Nuxt.js documentation.

Introduction Drupal integration