In this tutorial, I will show you how to build a food content detection Application using vue composition API and Clarifai food model API.
Overview of the Food Content Detection Application
The food content detection application will receive an image link then send the link to the Clarifai food model endpoint which detects the content of the food. When food content is detected, the users rank increments.
Technology
- Vue 2.6.10
- Clarifai
Prerequisite
- Basic knowledge of HTML, CSS, and JavaScript.
- Basic understanding of ES6 features such as
- Let
- const
- Destructuring
- Arrow functions
- Classes
- Import and Export
- Basic understanding of how to use npm.
- Signup for Clarifai API to get a free API key for 5,000 free operations each month.
Building applications with the Composition API
Though vue 3 stable release is not launched yet, we can still use its composition API in vue 2.To see how the vue 3 composition API can further be used in vue 2, let’s create food content detection application out of the composition functions. For data, we’ll use Clarifai food model API. You need to sign up and get an API key to follow along with this. Our first step is to create a project folder using Vue CLI:
To use the composition API, we have to install it differently with the following command:
npm install @vue/composition-api
After installation, we have to import it in our main.js
file:
It’s important to note that for now, the composition API is just a different alternative for writing components and does not displace the vue option API. We can still write our components using component options, scoped slots and mixins as usual.
Also, To use the Clarifai API, we have to install it differently with the following command:
npm install clarifai
then import it to the component it will be usedimport Clarifai from 'clarifai'
Building the individual components
For this app, we’ll have four components:
App.vue
: This is the parent component — it handles and collects data from the children components-FoodContent
,FoodImage
,Rank
andImageLinkForm
.FoodContent
: A child component — It receive the food content data as props from theApp
component.FoodImag
e: A child component — It receive the food’s image url data as props from theApp
component.Rank
: A child component — It receive the rank data as props from theApp
component through theImageLinkForm
component.ImageLinkForm
: A child component – It receives the following propsrank
,onImageLinkChange
,onImageLinkSubmit
from theApp
component and further passes down the rank props to theRank
component. The@change
event handler triggers the onImageLinkChange props which execute theonImageLinkChange
method in theApp
component While the@submit.prevent
event handler in the form tag triggers theonImageLinkSubmit
props which execute theonImageLinkSubmit
method in theApp
component.
In your project’s src
folder, add the code snippet below to the App.vue
component:
setup
– The setup
function is a new component option. It serves as the entry point for using the Composition API inside components. It controls the logic of the component and returns the methods and variables for use in the template. It receives props and context as arguments.
reactive
: It returns a reactive object. The template gets re-rendered each time any property or method in the reactive object changes.toRefs
: It converts a reactive object to a plain object, where each property on the resulting object is a ref pointing to the corresponding property in the original object.
In your project’s src/components
folder, create a FoodContent.vue
file and add the code snippet below :
In your project’s src/components
folder, create a FoodImage.vue
file and add the code snippet below :
In your project’s src/components
folder, create a Rank.vue
file and add the code snippet below :
In your project’s src/components
folder, create a ImageLinkForm.vue
file and add the code snippet below :
Run the Application
You can run our App with the command:
npm run serve
If the process is successful, the Browser opens with Url: http://localhost:3000/ with our app running.
Conclusion
Finally, we have built our food content detection app with vue 3 composition API. It’s interesting to see how the vue 3 Composition API is used in vue 2. One of its key advantages I’ve observed is the reduction in usage of the this
keyword and also, its reactivity. Feel free to add new features to the app, as this is a great way to learn.
You can check out the source code here