Nuxt.js Website Boilerplate

Community Articles
Community Articles Nuxt.js Website Boilerplate

Check out this website boilerplate built on Nuxt.js and Cosmic. 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 for easy reference
4. Full-site search functionality
5. All content is easily managed in Cosmic including pages, blog and contact info. Sign up for Cosmic 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 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 blog we'll quickstart a React Native Cross-Platform Blog using the Cosmic CLI. This app is three apps in one: Web, iOS and Android app all with content powered by Cosmic. Go to the GitHub repo to see the iOS and Android app share the same React Native codebase.
Now editors can use the new Unsplash Photos Extension to find and add stock photography to their media library, all from the comfort of their Bucket Dashboard without having to interface with a third-party website like Unsplash.
Cosmic makes it easy to manage content for your Vue.js applications. In this blog we'll quickstart a Vue.js RPG Adventure Game using the Cosmic CLI. Our game, "Enter The Cosmos", is a turn-based, RPG style game built using Vue.js, Node.js and Cosmic.
Filtering data is one of the most common feature of any data facing application, wheather it's a fron-end app or a back-end application. The Filter function is used to find records in a table or a dataset that meets certain criteria.
This article walks through an approach to build a web application using Angular and Cosmic to help generate marketing leads for your team.
In this tutorial, we're going to build a digital shrine to the great musical artists of our time and to listening to music by album - the way great artists meant it to be listened to! In the process, you'll learn a little bit about Cosmic, React, CSS Grid, Flexbox, Material UI and Spotify's aweso

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales