DEV Community

Cover image for Quick Introduction to Strapi HeadlessCMS for Ionic VueJS Mobile App
Aaron K Saunders
Aaron K Saunders

Posted on

2

Quick Introduction to Strapi HeadlessCMS for Ionic VueJS Mobile App

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

Alt Text

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

Video Tutorial On YouTube

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (2)

Collapse
 
aaronksaunders profile image
Aaron K Saunders • Edited

If you prefer ReactJS youtu.be/KCDtQocnZcQ

https://dev-to-uploads.s3.amazonaws.com/i/a9lrazd3qalgqc0ijb3a.png

Collapse
 
aaronksaunders profile image
Aaron K Saunders

video link - youtube.com/watch?v=82Z7Ojsm8NQ
source code - gum.co/NfyTZg

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay