The new Cosmic dashboard is here!
Test drive it now →

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.


You may also like


In this tutorial, I'm going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic and deploy it to Netlify.
Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we discussed making localization for websites less spooky using Gatsby and Cosmic.
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a Vue.js Music App. This Music website was built using Vue, Nuxt and Cosmic. Users can upload and play tracks, upload and manage album art plus leave comments.
Website built using the Next.js Website Boilerplate. Fully responsive down to mobile, SEO ready, includes a contact form and full site search.
Single page app that allows you to showcase you digital products and accepts credit card payment online. Very similar to the marketing sales funnel, but done in simple single page sales funnel.
5 Website Boilerplates: React, Node.js, Vue, Nuxt.js and Next.js

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales