I want to upload image to firebase With Nuxt JS

I am developing a web app that submits and retrieves data from Firebase, I have been able to fully configure my Nuxt JS app to connect with Firebase, but the issue comes when I want to submit data mixed with image files.

How do I set up my Nuxt JS project to submit both images and text files to Firebase?

Here is my Form template.

Index.js.

<template>

    <div class="w-full max-w-lg p-6 m-auto mx-auto dark:bg-gray-800 font-body">
        <h1 class="text-3xl font-semibold text-center text-gray-700 dark:text-white">Create Post</h1>
    
        <form class="space-y-8">
            <div>
                <label for="username" class="block text-sm text-gray-800 dark:text-gray-200">Title</label>
                <input v-model ="postDetails.title" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
            </div>
    
            <div class="">
           
                <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">Content</label>
                <textarea v-model ="postDetails.description" type="textarea" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" > </textarea>
            </div>

            <div class="">
           
           <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">Tag</label>

           <select  name="tags" id="" class="block w-full px-6 py-4 mt-2">
            <option v-for ="obj in postDetails.tag" :value="obj" class="text-black text-lg py-5">{{obj}}</option>
           
        </select>

       </div>

       <div class="">
           
           <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">Featured Image</label>
           <input v-model ="postDetails.featured_image" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
       </div>

       <div class="">
           
           <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">Created at</label>
           <input v-model ="postDetails.created_at" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
       </div>



    
            <div class="">
                <button class="w-full py-4 px-6 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
                   Post
                </button>
            </div>
        </form>
    
   
    </div>
    
    </template>
    
    <script>
    
export default {
name: "dashboard",

data(){

    return{

    postDetails:{
        
        title:"",
        content:"",
        tag:[
            
            "Business",
            "Entertainment",
            "News",
            "Science",
            "Sports",
            "Technology",
            ],
        featured_image:"",
        created_at:"",
     
    }


    }
},


    }
    </script>
        

>How do I set up my Nuxt JS project to submit both images and text files to Firebase?

As you already mentioned, you are able to connect to the firebase. Then to submit the files to Firebase, You can check with this Documentation-1, which states you need to import the exported bucket from firebase.js to index.js. After doing this step you need to Build the frontend to select the file to upload. You can check with the above mentioned Documentation which clearly describes the step by step process for uploading files to Firebase with Nuxt JS.

Also check with this Documentation-2 which explains clearly on how to submit the images to Firebase using the Nuxt JS.