Lupus Decoupled Nuxt 3 Demo Shadcn

A demo setup for https://www.drupal.org/project/lupus_decoupled with Shadcn components and Tailwind CSS.

The setup is mostly built upon the drupal-ce connector Nuxt module.

Overview

This is simply a new Nuxt 3 project with https://github.com/drunomics/nuxtjs-drupal-ce installed and configured.

Differences vs the naked demo

It has a nicer layout, mobile menu, styled article content (thanks to @tailwindcss/typography), dark mode switch (thanks to @nuxtjs/color-mode) and uses shadcn-vue for component library.

Try it

• Launch it with Lupus Decoupled on Gitpod.io OR

• Launch it on StackBlitz and connect it to a backend (see manual setup steps).

Manual setup steps

For stackblitz or local setup you'll get some network error until base URLs are set right. To do so:

1. Set the Drupal base URL in nuxt.config.ts, e.g. https://8080-shaal-drupalpod-8m3z0ms7mb6.ws-eu67.gitpod.io When using a Drupal gitpod/DrupalPod as a backend, make sure to set your environment to "Shared" via the workspace options menu, as found in the dashboard at https://gitpod.io. That way the frontend can connect to it.
2. Set the frontend base URL in Drupal at /admin/config/system/lupus-decoupled/settings, e.g. https://nuxt-starter-wuxxcy--3000.local-corp.webcontainer.io
3. Test it. Best add some content nodes and some menu-items pointing to them. /node/1 of the backend is available under /node/1 in the frontend. You should see styled frontend with menus, breadcrumbs & basic node-content (body field) working.

Setup

Make sure to install the dependencies:

# npm
npm install

# yarn
yarn install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.