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

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.

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