Tutorial: Create a blog using unite cms + vue.js

In this tutorial we will create a simple blog using a single page vue.js app that displays articles, stored in unite cms. The whole vue.js project can be found in this repository.

unite cms is an open source CMS written in PHP with a headless architecture. As a (frontend) developer you only get a GraphQL API endpoint and can choose any technology (vue.js in this case) to create an app that consumes this API.

Our final blog

Technology Stack

  • unitecms.io cloud for the content management part (Note: In this tutorial we are using the unitecms.io cloud. You can also install unite cms using composer on your own server)
  • vue-cli for creating a new vue project
  • vue-apollo to consume unite cms’ GraphQL API

Creating the content structure

unite cms is a content management system, that allows you to manage content for any kind of application (and not just Blogs). Because of this, the CMS comes without any default content types and we need to create a appropriate structure for our blog.

Create your first unite cms domain

To create your first unite cms domain, you need to create a new account at unitecms.io allows you register a free account at https://profile.unitecms.io/registration. During registration, you need to create an Organization. This will be your unitecms.io subdomain namespace where all your data will be stored.

After creating your account, you will get redirected to your very own unite cms subdomain where all your content will be stored.

A fresh unite cms Organization without any Domains

unite cms allows you to create different Domains to create logical groups of your content types. Lets create a new Domain for our blog. A unite cms Domain consists of content-types that allows to manage repeatable content, setting-types that hold a single setting element, and domain-member-types that define access to this domain. In this tutorial we will only create content- and setting-types but stick with the two default domain-member-types (“editor” and “viewer”). More infos about domain member types can be found in the docs.

Our sample blog will show multiple articles and a single about page so we will create an “articles” content-type and a “website” setting-type that allows us to manage the content of the about page as well as a general page header and footer text.

After clicking “+ Add a domain” you can insert the following domain schema, that defines our content structure:

Note: We want to save an image with each article. unite cms let you manage images using an image field type that stores images in a S3 bucket. Before you can actually create the blog domain, you need to replace the bucket placeholders with real s3 bucket (For example an amazon aws bucket. Endpoint would be https://s3.amazonaws.com).

If your domain schema is valid, a new domain will be created and you can add your first blog article as well as your website config:

Create an API key to access the content

unite cms automatically generates a GraphQL API endpoint for each of your domains. However before we can explore the endpoint, you need to create an API key and add it as an Viewer to the Blog Domain to grant read access.

API keys are managed on Organization level, so navigate to your Organization overview page and create a new API key, lets call it “Public Blog Key”.

After creating the API key (allowed origin: * is fine for the moment), copy the access token (we will need it in the next step), navigate back to the blog Domain and add the API key as a Viewer Member.

Note: Default domain permissions where generated automatically when you created the domain (all members can view, editors can update and delete, Organization admins bypass permissions). You can always check the “Update domain” page, to see permissions for all content and setting types.

Exploring the GraphQL API

A GraphQL allows you to write queries against the API endpoint in order to control which data should be returned (A good starting point is https://graphql.org/learn)/. To explore our GraphQL API endpoint, I’m using the greate GraphiQL client as a Chrome extension.

Now enter your API endpoint ({organization}.unitecms.io/{domain}/api?token={token}). If everything was set correctly, you now see a documentation explorer of all available objects on the right side:

Let’s try to get all articles, ordered by date as well as your website settings:

Create the vue.js app to display the articles

The last step of this tutorial is to use the GraphQL API in a vue.js application (The full project source can be found on Github). To setup the development environment, we are using yarn and the vue-cli:

NOTE: Apollo comes with many powerful tools, that do a lot of stuff for you out of the box (like caching). If you prefer to write your own logic you can use this minimal graphql client as an alternative.

Create the basic project structure

Our app starting point is the main.js file where vue, and the apollo-client will be initialized and our pages will be registered as routes:

By using vue-apollo it is very easy to connect a GraphQL query result to the UI. Things like fetching the content, updating component properties, caching etc. are working out of the box. This is the very lean and straightforward about-component, that displays a page with the about text:

Following this pattern, all other components can be created in a matter of minutes. Together with a a little bit of css code, your first application, powered by unite cms is almost complete. Just run `yarn build` and a production-ready version of your code will be generated, that should look something like this:

I hope, that our first tutorial was fun to read and easy to understand. If you want to get more information about unite cms, you can check out the docs. For questions, bug reports or feature request, you can create a new issue at our github repository.