Headless Silverstripe with Nuxt JS

Leverage the power of reusable components and speed of single page applications with server side rendering of Vue applications with Silverstripe CMS content using Nuxt JS

Code repository

Setting up your local environment

Altough a development environment can be set up without it, it is recommended to use Docker or something similar. The configuration bellow will add the necessary services to run Silverstripe and Nuxt, as well as an nginx proxy to direct the requests to the correct service and install dependencies.

Create a Silverstirpe and Nuxt project

Add a mysilverstripeapp directory to the root of your project folder and create a Silverstripe project by running the following command.
```
docker-compose run --rm silverstripe composer create-project silverstripe/installer .
```
Create a NuxtJS project by running the following in the root of your project directory. Make sure to install the Nuxt js axios module when promted as well as selecting Universal (SSR / SSG) mode and Server deployment target
```
docker-compose run --rm node npx create-nuxt-app nuxt
```

Add the following section to your mysilverstripeapp/composer.json

"repositories": [
  {
    "type": "vcs",
    "url": "https://github.com/olivernorden-silverstripe/silverstripe-headless-rest-api"
  }
],

Install the rest api by running the following command in your project root.

docker-compose run --rm silverstripe composer require olivernorden/silverstripe-headless-rest

Install Nuxt proxy by running the following command in your project root.
```
docker-compose run --rm node npm i @nuxtjs/proxy --prefix nuxt
```

Start your development environment

Run the following to start your local development environment.
```
docker-compose up -d
```

Run the following to build your Silverstripe database.

docker-compose run --rm silverstripe php vendor/silverstripe/framework/cli-script.php dev/build

You should now be able to access a boiler plate Nuxt application on http://localhost and the Silverstripe admin interface on http://localhost/admin using the default credentials admin:password.

Adding additional fields to the api

Add the following file to the Silverstripe configuration to expose additional fields in the api. The fields bellow will be required for the boiler plate Nuxt app. More information about extending the api can be found on Github. The new fields should be visible by accessing http://localhost/headless-api/v1/url?flush.

Connect Nuxt to Silverstripe

Remove myapp/nuxt/pages/index.js
Add/Modify the files to match the structure bellow. This will fetch page and navigation data from Silverstripe and pass it to your page component.
You should now be able to see a Nuxt boiler plate application that fetches data from Silversrtripe.

Page models are added as normal in Silversrtipe. A vue component will have to be added to /myapp/nuxt/pagetypes, imported and imported in the components object in _.vue with a key that matches the Silverstripe page model class name.