Community Articles Nuxt.js Website Boilerplate

Nuxt.js Website Boilerplate

Check out this website boilerplate built on Nuxt.js and Cosmic JS. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.

TL;DR

Download the GitHub repo
Check out the demo.

Features

1. Fully responsive down to mobile w/ Bootstrap frontend
2. SEO ready
3. A contact form that sends an email to your email(s) of choice and to Cosmic JS for easy reference
4. Full-site search functionality
5. All content is easily managed in Cosmic JS including pages, blog and contact info. Sign up for Cosmic JS to install the demo content and deploy this website. 

Get started 

git clone https://github.com/cosmicjs/nuxtjs-website-boilerplate
cd nuxtjs-website-boilerplate
npm install

Import the bucket.json file into your Cosmic JS bucket. To do this go to Your Bucket > Settings > Import / Export Data. 



 Run in production 

COSMIC_BUCKET=your-bucket-slug npm start 

Go to http://localhost:3000 

Run in development 

Create a config/development.js file and match it to config/production.js with your values. 

 npm run development 

 Go to http://localhost:5000

Env vars

As it states on the Nuxt.js website, you will need to set the environment variable HOST to 0.0.0.0.  This is already done in the package.json script for you, but you could also set this on the "Set Environment Variables" section located in Your Bucket > Settings > Deploy Web App.


Config 

Because Node.js doesn't have a mail server, the contact form uses mailgun to send the email. So add the following constants in the config file.


Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


In this tutorial, I’m going to give you an overview of Mux Extension, talk about the benefits of adding Mux to your Cosmic Bucket and show you how to install it to your Bucket in a few clicks.
This article shows you how to create a blazing fast Gridsome blog using Cosmic JS source plugin. Let’s get started.
I’m going to demonstrate how to get started integrating your Cosmic-powered content with your favorite third-party applications using Zapier.
Hi, In this tutorial, we are going to create an application that filters twitter tweets by selecting a specific location on the map. We are going to use React and Cosmic JS. We will be using Cosmic JS npm package for saving and sorting the most popular searches in our application. Let's get started.
For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be a total overkill. In this tutorial, we're going to build an e-commerce website using Nuxt and Cosmic JS.
In this blog we'll quickstart a React ToDo App using the Cosmic JS CLI. This is a simple todo application that consumes the Cosmic JS API and is built using React, Redux, Node.js and Webpack.

Ready to Get Started?

No payment info required.
Start Now   Contact Sales