Quick Introduction to Strapi HeadlessCMS for Ionic VueJS Mobile App

#vue #strapi #javascript #ionic

NEW Ionic VueJS Vuex Firebase Course Available On Udemy

[VIDEO] Quick Introduction to Strapi HeadlessCMS for Ionic VueJS Mobile App

Strapi.io - Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable, and developer-first.
www.strapi.io

What Is A Headless CMS

A headless CMS is content management software that enables writers to produce and organize content while providing developers with structured data that can be displayed using a separate system on the frontend of a website or app.

We quickly setup Strapi as a headless CMS for an Ionic Framework VueJS Application. The Application creates content that contains some text fields and an image field. The video walks through reading the data from Strapi and adding additional documents to the CMS through the Ionic VueJS Application.

Strapi Quick Start Guide Available Here

ImagePost Object In Strapi

title: text
body: text
image: media

We enable public access to all the content in the application for the purpose of the tutorial.

VueJS Code

We use Ionic Framework Vue Components
Start a blank template application using the ionic/cli
Application has two main components, Home and AddItem
Home.vue: displays a list of the ImagePost object
AddItem.vue: Input form to add the text fields and to select the image to include with the post