How To Make A Space Remover Online Tool In Laravel 8 With Vue 2 And Api - FreeCodeBlog

Last updated: Dec 11, 2021

Make a space remover online tool in laravel 8 with Vue 2 and API to remove space from any kind of text. Some times you may want to remove extra space from your text content that's why today I will make a space remover online tool using laravel 8, vue 2 and API.

 

How To Make A Space Remover Online Tool In Laravel 8 With Vue 2 And Api
How To Make A Space Remover Online Tool In Laravel 8 With Vue 2 And Api

 

Laravel To Make A Space Remover Online Tool.

For making space remover online tool laravel project tutorial I already installed laravel 8. If you haven't installed laravel 8 project yet or don't know how to install laravel then read how to install any kind of laravel version tutorial.

 

Laravel View & Controller & Route To Make A Space Remover Online Tool.

You need to create 2 controller once API and another web to make a space remover online tool. If you don't know how to create and use laravel view, controller and route then read all about laravel view controller and route tutorial before continue space remover tutorial.

 

/*
| Web Controller
*/
php artisan make:controller SpaceRemoverController
/*
| API Controller
*/
php artisan make:controller Api\SpaceRemoverController

 

Now you need to use API and web controller in routes files. open API route file and use space remover API controller top on the file.

 

/*
| API Controller
*/
use App\Http\Controllers\Api\SpaceRemoverController;

 

Next open web route file and use space remover web controller top on the file.

 

/*
| Web Controller
*/
use App\Http\Controllers\SpaceRemoverController;

 

Well, Now you need to make 2 routes once for web controller another for API controller to make space remover online tool in laravel.

 

/*
| Web Route
*/
Route::get('/space-remover', [SpaceRemoverController::class, 'space_remover'])->name('space.remover');
/*
| API Route
*/
Route::get('/space-remover', [SpaceRemoverController::class, 'space_remover']);

 

Next you need to create 2 method once for API controller and another for web controller. you need to create a blade file for web controller. for API controller I will use str replace to make a space remover online tool.

 

/*
| Web Controller
*/
public function space_remover()
{
  return view('space_remover');
}
/*
| API Controller
*/
public function space_remover(Request $request)
{
  return Str::replace('  ', ' ', $request->text);
}

 

Don't forgot to use str and request in API controller.

 

/*
| API Controller
*/
use Illuminate\Http\Request;
use Illuminate\Support\Str;

 

Make Space Remover Online Tool.

To make space remover online tool I already installed laravel ui version 3 for vue 2 and bootstrap font-end. If you haven't installed laravel ui 3 or don't know how to install laravel ui 3 then read install laravel ui package in any kind of laravel version tutorial.

 

Now create a “space_remover.blade.php” file into views folder and use below code in this file.

 

@extends('layouts.app')
@section('content')
<space-remover></space-remover> 
@endsection

 

Now go to resources js folder and open app.js file. use below line into app.js file.

 

Vue.component('space-remover', require('./components/SpaceRemover.vue').default);

 

Create a “SpaceRemover.vue” file into components folder and paste below code.

 

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">How To Make A Space Remover Online Tool In Laravel 8 With Vue 2 And Api</div>

                    <div class="card-body">
                    <textarea class="form-control" id="text" cols="30" v-model="text" required autofocus autocomplete="text" rows="4"></textarea>
                    <div class="text-left py-3">
                    <button @click="removeSpace()" type="button" class="btn btn-primary btn-sm">Remove Space</button>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              text: '',
            }
        },
        mounted() {
            console.log('How To Make A Space Remover Online Tool In Laravel 8 With Vue 2 And Api.')
        },
        methods: {
        removeSpace(){
         axios.get("/api/space-remover?text="+this.text)
               .then(response => {
                this.text = response.data;
                })
                .catch(e => {
                    console.log(e);
            });
        },
        },
    }
</script>

 

Open space remover tool on any web browser and type some text with multiple space. then click on “remove space” button to remove extra white space from your text.

 

Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
3 Ways To Upload Laravel Projects To Shared Hosting Cpanel

We can easily upload Laravel projects to shared Hosting (cpanel) using Zip file, Ftp and git version control method. To upload Laravel projects to... Read More

How To Make A User Email Verification In Laravel

Want to make a user email verification in laravel using ui, jetstream, breeze user authentication package? Yes! Okay then you must need to read thi... Read More

Laravel Project Upload To Cpanel Using Private Github Repository

Private GitHub repository for laravel uploading! Yes, You can easily upload your laravel project to shared hosting cpanel using private GitHub... Read More

How To Create A Simple Laravel Crud Project

Really want to create a simple laravel crud project? Yes. As a beginner Laravel developer you must know how to create Laravel Crud project. You can... Read More

Solve Ckeditor 5 Code Block Plugin Not Working In Laravel

Ckeditor 5 code block plugin not working in laravel? No. Do you have a programming laravel project and want to use code block ckeditor 5 plugin in... Read More