Photo by on Austin Neill Unsplash Three years ago, we fell down a rabbit hole. We landed in a strange frontier of web development. Talks of “static” and “serverless” sites, dedicated APIs, and burgeoning frontend wonders were common. JavaScript was everywhere. Developers were excited to build sites again. We had entered the universe. JAMstack On our blog, we’ve already discussed countless to store content and JS frameworks to render it. headless CMS Today, we keep exploring: 1) , an API-first CMS recommended by a friend, and 2) , a kickass Vue.js framework (we’ve wanted to use it ). Cockpit CMS Nuxt.js ever since we fell in love with Vue We’ll cover: How to set up a Cockpit CMS installation & plug it with Snipcart. How to use Nuxt.js static generation to render the frontend of our app. The result? A full JAMstack app: headless content management, frontend rendered in a JS framework, & shopping through an e-commerce API. We’ll also throw in a live demo and code repo at the end! But first, a few important definitions. What is Cockpit CMS? Our content data will be stored in : Cockpit Cockpit is an open source, API-driven CMS that lets you implement your site without compromises. Developer crafted a system made to build simple dynamic websites without jumping through the hoops of WordPress, Drupal and the likes. Artur Heinze Its API-first approach (aka “headless”) allows for content management that is from content rendering. You can learn more about it . decoupled in this primer on headless CMS Cockpit runs on PHP and is, at its core, a developer-first CMS. Here are some of its cool features: Self hosted : runs on a , no need for full SQL server Fast & lightweight lightweight database engine : implement on your site the way you want Flexible : easy for devs to create their own modules Expandable Modern & simple UI : markdown, assets, thumbnails, etc. Built-in tools What is Nuxt.js? will have our frontend covered for this one. Nuxt.js We had the chance to a lot lately, and were naturally intrigued by the Vue application framework that is Nuxt. play with Vue.js In a nutshell, Nuxt allows you to create apps where your can execute on both client and server. Universal Vue.js JavaScript Its main scope is UI rendering while abstracting away the client/server distribution. Like Vue, it can be used to start a project from scratch, or to improve on an existing one. Inspired by , Nuxt is a go-to solution for building SSR (Server Side Rendered) Vue apps. It’s also pretty good at generating static sites, thanks to its command. React’s Next.js generate And here’s a peek at how this little marvel actually works: Nuxt.js rendering process [source] We’ve seen comprehensive Nuxt.js examples & tutorials pop up ( & ) recently. In this one, we’ll see how an actual integration of Nuxt.js with an API-first CMS can work. here here Cockpit CMS Tutorial with Nuxt.js & Snipcart Pre-requisites Before building our awesome cosplay shop demo (yup, that’s right), you’ll need: If you are hosting Cockpit locally PHP >= 5.4 PDO with SQLite support (or MongoDB) GD extension enabled If you are hosting it somewhere A web server with the above specs (forever free in Test mode) A Snipcart account 1. Installing Cockpit CMS Go to the CMS . We’ll use the “Official release” here, to avoid unstable features. download page I’ll install Cockpit on its own instance. It’ll then be possible to access it with , and the public website with . cockpit.local snipcart-shop.local Once the installation is complete, go to to finish up. cockpit.local/install If you intend to push this installation live, . you should change your username and password 2. Creating products to sell with Snipcart We’ll create products in our CMS first. Start a new called . A is a way to hold all the content from a data structure. It's in a way the bread and butter of Cockpit CMS; lots of operations are done in this section. collection Product collection In this collection, we add the following fields: A field named . text Name A field named . text Description A field named . media Image A field named . text Price We now have to generate an API key to use Cockpit’s services, to do so, go to Settings (hamburger menu, top left corner), then General > API > Generate API token. Finally, we only need to add our products to our shop’s content repo: For this demo, we installed Cockpit on an Azure free site. It was very easy to set up: we pushed our code on GitHub and enabled automatic Git deploys in Azure. 3. Using & understanding Nuxt.js For the client-facing store itself, we’ll dive into Nuxt. First off, I must say I working with Nuxt. It’s super straightforward, their documentation is neat, and, as you already know, we’re currently on a honeymoon with Vue.js. loved First thing to get started is to install Nuxt and scaffold our project. We’ll need installed. If you don't have it, run: . vue-cli npm install vue-cli -g Then, we’ll scaffold the project with the Nuxt starter template: That’s it for the installation. You can start the dev server using: npm run dev Nuxt.js key concepts Let’s talk a bit about how Nuxt works. The first thing to understand is the . A page in Nuxt is kind of a . It's a Vue component that will be automatically added to the application routes. For instance, in the default files, you have this component: . This component will be rendered when you hit your application root URL at (if you're running the dev server). pages route pages/index.vue http://localhost:3000 If you want to create a products page, you could add a component named in the folder and then you would get this URL working: products.vue pages [https://localhost:3000/products](https://localhost:3000/products.) . Nuxt takes care of the routing automatically; you don’t have to register routes or anything. The component will be mounted instantly, and you will even be able to render a statically generated site with it. We’ll do this later in the tutorial. There’s also another important concept in Nuxt: . You'll see this folder in the project created by the starter template. In it, you'll want to add child components to be used in your pages. We'll create one in the post. components Another thing we’ll see are the . Layouts are used to define the skeleton of your site, it's usually where you will add your navigation and footer for example. layouts Last thing we’ll tackle is the file. It allows you to define which libraries or CSS you want to include globally and . nuxt.config.js much more You can also add your own configuration settings if needed. This is what we’ll do first, with Cockpit settings. We’ll use these when calling Cockpit CMS API to retrieve products data. Configuring Nuxt.js Open and add: nuxt.config.js We’ll replace with our own URL and with the API token we've generated in Cockpit. <cockpit-url> <api-token> You’ll now have access to these environment variables in your pages. Creating our layout Before creating the first page, we’ll need to make some changes to the layout. In addition to and , Nuxt also has a concept of layouts. Consider it a "master" page. This page must contain a special tag: . pages components <nuxt /> Mine looks like: Page components will be rendered inside the tag. <nuxt /> Creating pages Now for our first page. Open and remove everything. Let's start from scratch. index.vue We’ll begin by creating the template part of the component. This template will be in charge of rendering all products. Asking yourself where do the classes come from? I used , a CSS framework for the demo. It provides useful components and styles to get a good looking demo quickly. columns, is-mobile, is-multiline, is-centered, etc. [Bulma](http://bulma.io/) To add the reference to , I opened and added this object in the array: Bulma nuxt.config.js link While we’re here, we’ll also add Snipcart’s default CSS: Our head object should now look like: Any stylesheets added there will be included automatically in all pages. Notice the tag? This is a component we'll create later. small-product Now, we need to fetch our products. Nuxt provides a very awesome method for pages component: . asyncData It's important to know that this method can't be used in child components, only in pages components. This method will allow us to fetch data remotely before rendering the page itself. It’s especially useful when creating a static site! To interact with Cockpit API, we’ll use , a popular HTTP client in JavaScript: Axios npm install axios --save Our component should look like: In the method, I used Axios to fetch my products and generate thumbnails. Cockpit offers API endpoints for that. Notice the parameters the method receives: . The object will contain the settings set in . asyncData {env, params} env nuxt.config.js Your page component will receive a list of products when mounted. Awesome, right? Creating components For this to work, we’ll need to create the component . In the folder, create a new file named . SmallProduct.vue components SmallProduct.vue This component will render product details and Snipcart’s buy button. Now run: npm run dev Open your browser to and you should see something awesome! http://localhost:3000 4. Deploying our JAMstack bundle Job’s (almost) done! Our Cockpit + Nuxt store lacks one last thing: deployment. As we often do, we’ll use Netlify for hosting. Just create a new site in Netlify and use: npm install && npm run generate We’ll set the publish directory to . dist Give Netlify some time to build your site, and you’re done! GitHub repo & live demo Go ahead, check out the demo & code repo for this tuts! See GitHub code repo See live Cockpit + Nuxt.js demo Conclusion Well, this was a long one. I’ll keep the outro brief. ;) While Cockpit doesn’t offer hosted instances, it provides developers with a very malleable content API. Especially if you’re a PHP fan. Based on my tests, perf looks quite good & stable too. It’s still a young, free headless CMS, and there’s room to improve, visually and functionally speaking. Good news is: it’s ! So don’t hesitate to jump in and collaborate. open source As for Nuxt, well, I loved it! I guess it transpired enough in the post. Please give it a try if you want to fast-track SSR or static Vue apps development. If you’ve enjoyed this post, please take a second to share it on Twitter . Comments, questions? Section below is all yours! I originally published this on and shared it in our . the Snipcart Blog newsletter https://upscri.be/hackernoon/
