Nuxt.js project connected to Bloomreach CMS

Create project

To set up this project from scratch, you can run the following command, where 'projectname' can be replaced with your local project name

npx create-bloomreach-with-nuxt projectname

This repository provides a template for Nuxt.js web projects containing content to be generated from the Bloomreach CMS.

CMS Setup

You can use your own account or the officially available public developer environment to access the Bloomreach Experience Manager.
From the public environment you can log in to test this setup with the information provided via the link to the public environment.

After login fulfill the following steps:

create a channel in the Experience Manager section and give it a name, f.ex. "example-channel"
create a project in the project section by entering a project name and ticking "development project" and after that also "Includes content type changes".
add the channel to it
clicking on the settings wheel in the project section next to channel name leads to the project settings. Change the project frontend url to the url where the app is currently running, f.ex. http://localhost:3000/
add the site configuration for your components to your project. You can do that using the Components menu in the Site development(beta) section. F.ex. add the site configuration for the BrBanner like this
1. Add a new Component configuration
2. ad the following parameters:
  Display name: BrBanner
  Extends: base/component
  Ctype: BrBanner
3. In the Properties menu, you need to add any properties that you want the component to use. In the case of the BrBanner, the property configuration could contain one simple property with the following attributes.
  Name: bannerText
  Value type: String

Application setup to connect CMS

First you need to create a .env file that contains all the environment variables. You can do this by copying the .env.template and removing the .template extension.

To connect your application to a channel created in the CMS, you can add the following environment variables

As the username, you can insert the domain of the URL that is shown before login to the Experience manager that comes right after https://. So if you have the URL https://developers.bloomreach.io/cms/?0 the necessary value for the field username would be developer.bloomreach.io.
As the channel name, you can add the name of a created channel and replace spaces in the channel name with a dash.

To fill the components of the application you first need to run the application, f.ex via npm run dev. Now go to the projects section and open your channel.

You should now see a lock in the content section of your application. To finally make your content editable you can click on "Page", which opens a menu in which "Add to project" can be selected. It is now possible to add components via the components section. if you want to add furhter components you need to adapt the following:

add the component source code to your application
add the component to the mapping in the _.vue
add the adequate site configuration

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out the documentation.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

`assets`

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.