{"id":28391,"date":"2022-03-23T22:02:21","date_gmt":"2022-03-23T22:02:21","guid":{"rendered":"http:\/\/Build-an-Instagram-stories-experience-in-Nuxtjs"},"modified":"2022-03-23T22:02:21","modified_gmt":"2022-03-23T22:02:21","slug":"build-an-instagram-stories-experience-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-instagram-stories-experience-in-nuxtjs\/","title":{"rendered":"Build an Instagram Stories Experience"},"content":{"rendered":"

According to Instagram, the engagement on the platform has ballooned to an average of 30 minutes<\/a> per day since the introduction of stories. It enables users to post and view highlights about their activities.\nStories are so popular that they are used on major social media platforms like Facebook, WhatsApp, LinkedIn, and Twitter.<\/p>\n

This post will discuss how to quickly build an Instagram stories experience using Cloudinary<\/a> and Nuxt.js<\/a>. At the end of this tutorial, we will learn how to serve images using Cloudinary in Nuxt.js.<\/p>\n

Nuxt.js is a vue-based frontend development framework that enables functionalities like server-side rendering, static site generation, file-system routing, components auto-import, and API endpoints for backend features.<\/p>\n

Cloudinary offers a robust visual media platform to upload, store, manage, transform, and deliver images and videos for websites and applications.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a CodeSan<\/a>d<\/a>box<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Github link here<\/a>.<\/p>\n

Prerequisites<\/h2>\n

The following steps in this post require JavaScript and Vue.js experience. Experience with Nuxt.js isn\u2019t a requirement, but it\u2019s nice to have.<\/p>\n

We also need a Cloudinary account<\/a> to store the media files. Signup<\/strong><\/a> is completely free<\/strong>.<\/p>\n

Getting Started<\/h2>\n

We need to create a Nuxt.js starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n

npx create-nuxt-app insta_stories && cd insta_stories\n<\/code><\/pre>\n
This command will ask us some questions on how to configure our application. We can answer the questions as shown below:<\/p>\n
    Ok to proceed? (y) < PRESS \"y\"<\/span> and<\/span> hit ENTER>\n    project name: <PRESS ENTER>\n    programming langauge: <JAVASCRIPT>\n    package manager: <NPM>\n    UI framework: <TAILWIND CSS>\n    Nuxt.js modules: <AXIOS - PROMISE BASED HTTP CLIENT>\n    Linting tools: <ESLINT, PRETTIER>\n    Testing framework: <NONE>\n    Rendering mode: <UNIVERSAL (SSR\/STATIC<\/span>)\n    Deployment target: <STATIC<\/span>\/JAMSTACK HOSTING>\n    Deployment tools: <JSCONFIG.JSON>\n    Continous integration: <NONE>\n    Version control system: <GIT>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The command creates a Nuxt.js project with TailwindCSS called insta_stories<\/code>, and navigates into the project directory.<\/p>\n
We proceed to install @nuxtjs\/cloudinary<\/a> and vue-insta-stories<\/a> ****dependencies with:<\/p>\n
npm install @nuxtjs\/cloudinary vue-insta-stories @vue\/composition-api\n<\/code><\/pre>\n
@nuxtjs\/cloudinary<\/code> is library for integrating Cloudinary with Nuxt.js.<\/p>\n
vue-insta-stories<\/code> is a customizable component for creating stories.<\/p>\n
@vue\/composition-api<\/code> is a library for composing components. It\u2019s a required dependency for vue-insta-stories<\/code>.<\/p>\n
Configuring Cloudinary in Nuxt.js<\/strong>\nFirst, we need to modify the nuxt.config.js<\/code> file by adding @nuxtjs\/cloudinary<\/code> as a module in the  modules<\/code> section:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>, \/\/add this<\/span>\n      ],\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we need to configure Cloudinary by adding a cloudinary<\/code> section below the modules<\/code> section as shown below:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>,\n      ],\n    \n    \/\/add this<\/span>\n    cloudinary<\/span>: {\n        cloudName<\/span>: '<your-cloud-name>'<\/span>,\n        useComponent<\/span>: true<\/span>,\n      },\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The useComponent<\/code> flag set to true lets us use the built-in Cloudinary components. Our cloud name is obtained from our Cloudinary dashboard.<\/p>\n
Image sourcing and upload to Cloudinary<\/h2>\n
Next, we need to upload sample images from Unsplash to create our Instagram stories.<\/p>\n
Stories Photos url<\/strong><\/p>\n
TailwindCSS<\/a> is a utility-first CSS framework packed with classes to help us style our web page.<\/p>\n