Building a Vue SPA With Laravel

Prerequisite

1. Fundamental of Laravel
2. Fundamental of Vue
3. Fundamental of VueRouter

1. Install Laravel

composer global require "laravel/installer"

This command allows you to install the Laravel installer, so you can create a new laravel project easily in the future.

Once it completed downloaded. Enter the following command.

laravel new <any-projects-name-you-want>

You just have to wait until it completes to download.

1.1 Remove preset scaffolding Optional

This is the optional step.

We are not using the scaffolding in this tutorial. Therefore, I am going to remove it to keep the folder structure as neat as possible.

Simply enter the command below.

php artisan preset none

After removing the scaffolding, remember to run npm install to install all the dependencies.

Thanks to John LeVan

2. Install Vue, VueRouter and Vuetify

npm install vue vue-router vuetify

By enter this command, Vue, Vue Router and Vuetify will be downloaded into your node_modules folder.

3. Create app.blade.php

Rename welcome.blade.php to app.blade.php under resources/views directory.

Remove the code and tweak it like the screenshot below.

The reason to do so is to keep your code simple and clean.

We included Vuetify CSS because we will be using it later. You can find the the code easily from here.

You need to add <meta> of CSRF. Axios need to fetch the CSRF from the meta and insert it into Axios header. If you don’t do so, you are not allow to submit your form by using POST method.

You can get the line of code from this Laravel CSRF.

4. Modify Laravel routes

Go to routes/ directory and open the web.php.

Replace the default with the code below.

Route::get('/{any}', 'SinglePageController@index')->where('any', '.*');

Without this line of code in the web.php, your Vue Router can’t work properly.

5. Create Controller

After updating the web.php file, we need to create a SinglePageControllerto handle the route.

Go to your terminal and enter the command below:

php artisan make:controller SinglePageController

You will see the controller are created under app/Http/Controllers/ directory.

Open the SinglePageController.php file and add the line of codes below into the class.

public function index() {
    return view('app');
}

6. Modify app.js

Open your app.js file under resources/js/ and tweak the script as screenshot below.

I prefer to use import for my own preferences.

Read this post from Stack Overflow if you want to know more about import and require

If you run npm run watch now, you will receive an error message from the Toast.

This is because we still haven’t create the routes.js and App.vue.

7. Structure the js directory

We have to create some folders into the resources/js/ directory.

Although we are not using the folder now, but I always keep this as a habit when I am setting up for SPA by using Laravel.

We are creating a layouts, pages, views and stores folder. By right, I also need to create a routes folder but I will skip this for now in this tutorial.

8. Setup Vue Components

We need to create some components now.

Let’s create Home.vue and About.vue under resources/js/components/ directory.

You can delete the ExampleComponent.vue component if you want to. Since we are not using it.

We just need to create a very simple template here.

And now, we need to create App.vue under resources/js/views/. This would be the main file that used to render those files which fall under those directories which we created earlier.

You might find these HTML tags are very complex. You can ignore them for now because those HTML tags are used for Vuetify.

The most important part of the scripts is the <router-view>. This is where you see your content of the component.

If you npm run watch, you will realize the error about App.vue is missing. This is because we have created the file.

9. Setup Vue Router

We need to create a route in order for us to navigate.

You will need to create a routes.js file under resources/js/ directory.

Then you just need to input the code as shown below.

As you can see we import the components we created earlier under resources/js/components/

If you compile the file by enter the command of npm run watch now, you will receive an error, because the compiler does not understand what does the @ used for.

10. Setup webpack.mix.js

Let’s go to webpack.mix.js at your root directory.

We need to define the @ in order to tell the compiler what does the @ uses for.

After adding the alias in webpack.mix.js, then the compiler would understand the @ is represent resources/.

Why we want to do so? In the future your directory might have a lot of levels. This is to save your time to typing ../ instead you just need to type @.

Now, re-run your npm run watch again.

Because your compiler need to re-compile the webpack you adjusted in order to understand the alias.

You will see this in a while.

11. Let’s run and see the result.

Let run the command below, php artisan serve

By doing so, your website is now live on your localhost, [[http://localhost:8000](http://localhost:8000)](http://localhost:8000](http://localhost:8000) "http://localhost:8000](http://localhost:8000)").

Some of you might ask why I want to post the screenshot but not sharing the code.

Well, simply because I want all of you to code by yourself and memorize it.

I hope you enjoy my tutorial.

30s ad

☞ Vuejs 2 + Vuex + Firebase + Cloud Firestore

☞ Building Applications with VueJs, Vuex, VueRouter, and Nuxt

☞ Ethereum and Solidity: Build Dapp with VueJS

☞ Learn Web Development Using VueJS

☞ Curso de VueJS 2

☞ Vuejs 2 + Vuex con TypeScript Nivel PRO

☞ Curso de Vuejs 2, Cognito y GraphQL

#vue-js

What is GEEK

Buddha Community

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Laravel 8 VUE JS Example | Laravel 8 VUE JS Tutorial For Beginners

#laravel 8 vue js #laravel vue js #laravel vue js tutorial #laravel 8 vue js tutorial

Vue Laravel File Upload | Upload Image in Laravel Vue

We will use Laravel as a backend and Vue js as a frontend framework or library. In this small project, we will upload an image from the vue component. First, we download the Laravel and then install the dependencies using pm, and then we will start our project.

Steps to upload file in Laravel Vue

The first step will be to install and configure the Laravel Framework.

Step 1: Install Laravel

Go to your terminal and hit the following command.

composer create-project laravel/laravel vuefileupload --prefer-dist

After installation, go to the project folder root and type the following command.

npm install

It installs all the necessary dependencies to build Vue components.

#vue #laravel vue #vue js #laravel

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

Vue File Upload Using vue-dropzone Tutorial

In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is  highly customizable. The  vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.

Dropzone.js is an open-source library providing drag-and-drop file uploads with image previews. DropzoneJS is lightweight, doesn’t depend on any other library (like jQuery), and is highly customizable.

The vue-dropzone is a vue component implemented on top of Dropzone.js.

First, install the Vue using Vue CLI.

Step 1: Install Vue.js using Vue CLI.

Go to your terminal and hit the following command.

npm install -g @vue/cli
         or
yarn global add @vue/cli

If you face any error, try running the command as an administrator.

Now, we need to generate the necessary scaffold. So type the following command.

vue create vuedropzone

It will install the scaffold.

Open the project in your favorite editor. Mine is Visual Studio Code.

cd vuedropzone
code .

Step 2: Install vue-dropzone.

I am using the Yarn package manager. So let’s install using Yarn. You can use NPM, also. It does not matter.

yarn add vue2-dropzone

or

npm install vue2-dropzone

Okay, now we need to add one css file with the above package. Now, vue cli uses css loader, so we can directly import in the src >>  main.js entry file.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

import 'vue2-dropzone/dist/vue2Dropzone.css'

If importing css is not working for you, then you need to install that CSS file manually.

Copy this vue2Dropzone.css file’s content.

Create one file inside the src  >>  assets folder, create one css file called vuedropzone.css and paste the content there.

Import this css file inside src  >>  App.vue file.

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, it should include in our application.

Step 3: Upload an Image.

Our primary boilerplate has one ready-made component called HelloWorld.vue inside src  >>  components folder. Now, create one more file called FileUpload.vue.

Add the following code to FileUpload.vue file.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="upload" :options="config"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "https://appdividend.com"
    }
  }),
  components: {
    vueDropzone
  }
};
</script>

Here, our API endpoint is https://appdividend.com. It is the point where we will hit the POST route and store our image, but it is my blog’s homepage, so it will not work anyway. But let me import this file into App.vue component and see what happens.

// App.vue

<template>
  <div id="app">
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue'

export default {
  name: 'app',
  components: {
    FileUpload
  }
}
</script>

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, start the development server using the following command. It will open up URL: http://localhost:8080.

npm run serve

Now, after uploading the image, we can see that the image upload is failed due to the wrong POST request endpoint.

Step 4: Create Laravel API for the endpoint.

Install the Laravel.

After that, we configure the database in the .env file and use MySQL database.

We need to create one model and migration file to store the image. So let us install the following command inside the Laravel project.

php artisan make:model Image -m

It will create both the Image model and create_images_table.php migrations file.

Now, open the migrations file and add the schema to it.

// create_images_table.php

public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('image_name');
            $table->timestamps();
        });
    }

Now, migrate the database table using the following command.

php artisan migrate

It creates the table in the database.

Now, we need to add a laravel-cors package to prevent cross-site-allow-origin errors. Go to the Laravel root and enter the following command to install it.

composer require barryvdh/laravel-cors

Configure it in the config  >>  app.php file.

Barryvdh\Cors\ServiceProvider::class,

Add the middleware inside app >>  Http  >>  Kernel.php file.

// Kernel.php

protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
        \Barryvdh\Cors\HandleCors::class,
];

Step 5: Define the API route and method to store the image.

First, create an ImageController.php file using the following command.

php artisan make:controller ImageController

Define the store method. Also, create one images folder inside the public directory because we will store an image inside it.

Right now, I have written the store function that handles one image at a time. So do not upload multiple photos at a time; otherwise, it will break.

// ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image;

class ImageController extends Controller
{
    public function store(Request $request)
    {
       if($request->file('file'))
       {
          $image = $request->file('file');
          $name = time().$image->getClientOriginalName();
          $image->move(public_path().'/images/', $name); 
        }

       $image= new Image();
       $image->image_name = $name;
       $image->save();

       return response()->json(['success' => 'You have successfully uploaded an image'], 200);
     }
}

Go to the routes   >>  api.php file and add the following route.

// api.php

Route::post('image', 'ImageController@store');

Step 6: Edit FileUpload.vue component.

We need to add the correct Post request API endpoint in FileUpload.vue component.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="drop1" :options="config" @vdropzone-complete="afterComplete"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "http://localhost:8000/api/image",
      
    }
  }),
  components: {
    vueDropzone
  },
  methods: {
    afterComplete(file) {
      console.log(file);
    }
  }
};
</script>

Now, save the file and try to upload an image. If everything is okay, then you will be able to save the image on the Laravel web server as well as save the name in the database as well.

You can also verify on the server side by checking the database entry and the images folder in which we have saved the image.

Step 7: More vue-dropzone configuration.

The only required options are url, but there are many more you can use.

For example, let’s say you want:

• A maximum of 4 files
• 2 MB max file size
• Sent in chunks of 500 bytes
• Set a custom thumbnail size of 150px
• Make the uploaded items cancelable and removable (by default, they’re not)

export default {
  data: () => ({
    dropOptions: {
      url: "https://httpbin.org/post",
      maxFilesize: 5, // MB
      maxFiles: 5,
      chunking: true,
      chunkSize: 400, // Bytes
      thumbnailWidth: 100, // px
      thumbnailHeight: 100,
      addRemoveLinks: true
    }
  })
  // ...
}

Happy Coding !!!

Originally published at https://appdividend.com 

#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli