Laravel 9 with vue 3 install and run helo vue laravel world

PHOTO

Tue Dec 13 2022 07:23:56 GMT+0000 (Coordinated Universal Time)

1. First install laravel as usual
2. the cd/enter to your project
3. now run the command [npm i vue@next vue-loader@next] to install vue into your project
4. now install vue plugin run the command [npm i @vitejs/plugin-vue]
5. if it came npm errors the youcan install specified version of vitreplugin by typing
e.g[npm i @vitejs/plugin-vue@3.0.x]
6. now open vite.config.js file and add some code as follows
add this line at headings import vue from "@vitejs/plugin-vue";
7. then put a coma after laravel code and add the following code 
vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                }
            }
        })
8. open the blade main or welcome file and make a div in the body with id 'app'
9. now go to the resources/js folder and make a file named welcome.vue and type the follwing code in it and save 
  <template>
    <h1>welcome page frm vue js</h1>
</template>
10. now open app.js file in resources/js folder and remove the existing code. Then type the following code
import {createApp} from "vue";
import welcome from './welcome.vue';

createApp(welcome).mount('#app');
11. No open welcome.blade file and add the following code in head section
@vite(['resources/js/app.js','resources/css/app.css'])
12. Hurrah!! now enjoy laravel with vue..

COPY

Install Vue 3 In Laravel 9 With Vite | Laravel Vite With Vue 3 | Vite Laravel Vue 3 | #1 HINDI

Save snippets that work from anywhere online with our extensions

Comments

More like this

#laravel

file_put_contents(...): failed to open stream: Permission denied

php artisan cache:clear
chmod -R 777 storage/
composer dump-autoload

#php #laravel

Method Illuminate\Support\Collection::appends does not exist

// replace get()
$products = Product::where('active', 1)->get();

// by paginate()
$products = Product::where('active', 1)->paginate(10);

#php #laravel

Call to a member function getClientOriginalName() on null

<!-- use enctype -->
<form  action="/route" method="POST" enctype="multipart/form-data">

#php #laravel

array dot method

$original = [
    'user' => [
        'name' => 'foo',
        'occupation' => 'bar',
    ]
];
 
$dotted = Arr::dot($original);
 
// Results in...
$dotted = [
    'user.name' => 'foo',
    'user.occupation' => 'bar',
];

#javascript #ajax

JavaScript Fetch API - Ajax - Request

// GET Request.
fetch('https://api.github.com/users/rich-harris')
  // Handle success
  .then(response => response.json())  // convert to json
  .then(json => console.log(json))    // print data to console
  .catch(err => console.log('Request Failed', err)); // Catch errors

#ajax #jquery #javascript

Verificación de email con ajax

function verificarEmail() {
  let data = $("#email").serialize();
  $("#errorEmail").text("");
  $.ajax({
    method: "POST",
    url: '/verificarEmail',
    data: data
  })
  .done(function(respuesta) {
    if(respuesta == "Existe"){
      $("#errorEmail").text("El email ya se encuentra registrado.")
    }
   })
  .fail(function() {
    alert( "error" );
  })
}

#javascript #ajax

Get cart details javascript/ajax - cart drawer




// ------------------ Cart drawer open/close  ----------------------\\
  $(document).on("click",".site-header__cart-ajax", function(e){
    e.preventDefault();
    $('body').toggleClass('drawer-open');
  });
  $('.cart-drawer__close').click(function(e){
    $('body').toggleClass('drawer-open');
  });
  $('.drawer-overlap').click(function(e){
    $('body').toggleClass('drawer-open');
  }); 

  $('.cart-drawer__continue').click(function(e){
    $('body').toggleClass('drawer-open');
  });





  $(document).on("click",".single-ajax-cart-btn", function(e){
    e.preventDefault()
      $(this).text('Adding...');
      $.ajax({
            type: 'POST', 
            url: '/cart/add.js',
            dataType: 'json', 
            data: $(this).parent().parent().serialize(),
            success: function(data) {
              $('.product-form__cart-submit').text('Add to cart');
              get_cart_details();
            console.log("submitted");
            },
            error: 'addToCartFail'
        });
  });

  
  $(document).on("click",".single-ajax-cart-btn-upsell", function(e){
    e.preventDefault()
    var upsell_form = $(this).parent();
      $(this).text('Adding...');
      $.ajax({
            type: 'POST', 
            url: '/cart/add.js',
            dataType: 'json', 
            data: $(upsell_form).serialize(),
            success: function(data) {
              $('.single-ajax-cart-btn-upsell').text('Add to cart');
              get_cart_details();
            console.log("submitted");
            },
            error: 'addToCartFail'
        });
  });

  $(document).on("click",".new-ajax-btn", function(e){
    e.preventDefault()
      $(this).text('Adding...');
      $.ajax({
            type: 'POST', 
            url: '/cart/add.js',
            dataType: 'json', 
            data: $(this).parent().parent().serialize(),
            success: function(data) {
              $('.product-form__cart-submit').text('Add to cart');
              get_cart_details();
            console.log("submitted");
            },
            error: 'addToCartFail'
        });
  });





var product_total_price = 0;

// ----------------- Get cart details -------------\\
function get_cart_details(){
  $.getJSON('/cart.js', function(cart) {
    // The cart data
    var drawer_item_html = '';              
    var cart_items = cart.items;
    var total_items = cart.item_count;
    product_total_price = cart.items_subtotal_price;
    console.log(product_total_price);
    $('.cart-drawer__total-amount').html('$'+((product_total_price * 0.01).toFixed(2)-20));
    console.log('total_items'+total_items);
    if(total_items == 0){
      $('.cart-drawer__no-item').addClass('cart-drawer__no-item_visible');
    }else{
      $('.cart-drawer__no-item').removeClass('cart-drawer__no-item_visible');
    }
    $('.cart-drawer__count').html(total_items);
    $('.cart-drawer__count--bag').html(total_items);
    $('.nav__cart-count').html(total_items);
    $('body').addClass('drawer-open');
    console.log(cart);
      for(var i=0; i<=cart_items.length; i++){
          var product_image = cart_items[i].image;
          var product_name = cart_items[i].product_title;
          var product_variant_option_name = cart_items[i].options_with_values[0].name;
          var product_variant_option_value = cart_items[i].options_with_values[0].value;
          var product_variant = cart_items[i].variant_title;
          var product_quantity = cart_items[i].quantity;
          var product_price = cart_items[i].line_price;
          var product_variant_id = cart_items[i].variant_id;
          var product_url = cart_items[i].url;
          var product_key = cart_items[i].key;
          
          // ------------- Add HTML item here -------------//
          drawer_item_html += '<div class="cart-drawer__item">';
          drawer_item_html += '<div class="cart-drawer__image">';
          drawer_item_html += '<img src="'+product_image+'" >';
          drawer_item_html += '</div>';
          drawer_item_html += '<div class="cart-drawer__info">';
          drawer_item_html += '<div class="cart-drawer__title"><a class="cart-drawer__url" href="'+product_url+'">'+product_name+'</a></div>';
        if(product_variant_option_value.indexOf("Default Title") != 0 ){
          drawer_item_html += '<div class="cart-drawer__variant">'+/*product_variant_option_name*/"Size/Color"+': '+product_variant_option_value+'</div>';
        }  
          drawer_item_html += '<div class="cart-drawer__price"  data-id="'+product_variant_id+'">$'+((product_price * 0.01).toFixed(2))+'</div>';
          drawer_item_html += '<div class="cart-drawer__qty">';
          drawer_item_html += '<button class="minus-btn cart-drawer__qty-btn" type="button" name="button"><i class="fa fa-minus"></i></button>';
          drawer_item_html += '<input type="number"  class="cart-drawer__qty-input" name="updates['+product_variant_id+']" data-id="'+product_variant_id+'"  id="updates_'+product_key+'" value="'+product_quantity+'" min="1" aria-label="Quantity" />';
          drawer_item_html += '<button class="plus-btn cart-drawer__qty-btn" type="button" name="button"><i class="fa fa-plus"></i></button>';
          drawer_item_html += '</div>';
          drawer_item_html += '</div>';
          drawer_item_html += '<div class="cart-drawer__remove">';
          drawer_item_html += '<a href="#" class="cart-drawer__remove-url" data-id="'+product_variant_id+'"><i class="fa fa-trash-o" aria-hidden="true"></i></a>';
          drawer_item_html += '</div>';
          drawer_item_html += '</div>';
          $('.cart-drawer__content').html(drawer_item_html);
          } 
      });     
}

// var discount_apply = '';
// var discount_status = '';

// $('.cart_discount_button').click(function(){
//     var my_inp = $('.disc_cont').val();
//     var my_discounts = $('.myDiscHolder').attr('data-disc');

//     if (my_discounts.indexOf(my_inp) >= 4){
//         discount_apply = my_inp;
//         discount_status = 'yes';
//         console.log(discount_apply);
//         $('.disc_cont').addClass('border-green');
//         $('.disc_cont').removeClass('border-red');
//     }else{
//         discount_status = 'no';
//         console.log('Bammer!! it did not matched');
//         $('.disc_cont').addClass('border-red');
//         $('.disc_cont').removeClass('border-green');
//     }
// });

// $('.button_checkout').click(function(e){
//     e.preventDefault();
//     if(discount_status == 'yes'){
//         window.location = '/checkout?discount='+ discount_apply;
//     }
//     else{
//         window.location = '/checkout';
//     }
// })



$('.button_checkout').click(function(e){
    window.location = '/checkout?discount=SPRING';
})











// ------------------ Ajax cart functions ----------------------\\
$(document).on("click",".minus-btn", function(e){
  e.preventDefault();
  var $this = $(this);
  var $input = $this.closest('div').find('input');
  var value = parseInt($input.val());  
  if (value > 1) {
    value = value - 1;
  } else {
    value = 0;
    $(this).parent().parent().parent().remove();
  }  
  $input.val(value);
  change_qty($input);
});

$(document).on("click",".plus-btn", function(e){    
  e.preventDefault();
  var $this = $(this);
  var $input = $this.closest('div').find('input');
  var value = parseInt($input.val());  
  if (value < 100) {
    value = value + 1;
  } else {
    value =100;
  }  
  $input.val(value);            
    change_qty($input);
});  

function change_qty($input){
  var variant_id= $($input).attr("data-id");
  var quantity= $($input).val();          
  var data = { updates: {} };
  data.updates[variant_id] = quantity;
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js',
    data: data,
    dataType: 'json',
    success: function(res) {               
      console.log(res.items_subtotal_price);
      product_total_price = res.items_subtotal_price;
      var pro_data = res.items;              
      console.log(res);
      var price = res.total_price ;
      price = price/100 - 20;
      var tot_qty = res.item_count;
      if(tot_qty == 0){
        $('.cart-drawer__no-item').addClass('cart-drawer__no-item_visible');
      }else{
        $('.cart-drawer__no-item').removeClass('cart-drawer__no-item_visible');
      }
      $('.cart-drawer__count').html(tot_qty);
      $('.cart-drawer__count--bag').html(tot_qty);
      $('.nav__cart-count').html(tot_qty);
      $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
      if(tot_qty == 0){
        $('.cart-drawer__total-amount').html('$0');
      }else{
        $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
      }
      jQuery.each(pro_data, function(index, item) {
        var spe_price=item.final_line_price;
        spe_price= spe_price/100;
        if(item.id == variant_id){
          $('.cart-drawer__price[data-id='+item.id+']').html('$' + spe_price.toFixed(2));
        }
      });    
      
    }
  });
};

$(document).on("click",".cart-drawer__remove-url", function(event){
  event.preventDefault();
  var variant_id = $(this).attr('data-id');
  console.log("varient: "+variant_id);
  var data = { updates: {} };
  data.updates[variant_id] = '0';
  jQuery.ajax({
  type: 'POST',
  url: '/cart/update.js',
  data: data,
  dataType: 'json',
  success: function(res) {
  console.log(res);
  console.log(res.items_subtotal_price);
  product_total_price = res.items_subtotal_price;      
   var pro_data = res.items;
   var price = res.total_price;
    price = price/100 -20;
    var tot_qty = res.item_count;
    if(tot_qty == 0){
      $('.cart-drawer__no-item').addClass('cart-drawer__no-item_visible');
    }else{
      $('.cart-drawer__no-item').removeClass('cart-drawer__no-item_visible');
    }
    $('.cart-drawer__count').html(tot_qty);
    $('.cart-drawer__count--bag').html(tot_qty);
    $('.nav__cart-count').html(tot_qty);
    $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
          if(tot_qty == 0){
        $('.cart-drawer__total-amount').html('$0');
      }else{
        $('.cart-drawer__total-amount').html('$' + price.toFixed(2));
      }
      if(tot_qty <= 0){
      $('.my__custom_cart_drawer').addClass('no_item');
    }
    
    var drawerDiscount = $(".cart-drawer__price").attr("data-id");
    console.log(drawerDiscount);
    

  
  }
  });
    $(this).parent().parent().remove();
  });


// ------------------ Ajax cart update for cart template ----------------------\\
$(document).on('change', '.cart__quantity-selector', function() {      
var variant_id= $(this).attr("data-id");
var quantity= $(this).val();      
var data = { updates: {} };
data.updates[variant_id] = quantity;
console.log(data);
jQuery.ajax({
type: 'POST',
url: '/cart/update.js',
data: data,
dataType: 'json',
success: function(res) { 
product_total_price = res.items_subtotal_price;
var pro_data = res.items;          
console.log(pro_data);
var price = res.total_price ;
price = price/100;
var tot_qty = res.item_count;
$('.new-cart-sidebar #bk-cart-subtotal-price').html('$' + price.toFixed(2));
$('.the_cart_total_amount').html('$' + price.toFixed(2));
$('.new-cart-sidebar .es-subtotal-text').html('Subtotal ( '+tot_qty+' Products):');
$('.the_cart_title').html(tot_qty+' item in your Cart');

jQuery.each(pro_data, function(index, item) {
  var spe_price=item.final_line_price;
  spe_price= spe_price/100;
  if(item.id == variant_id){
    $('.saso-cart-item-price.desk-price-ajax-change[data-id='+item.id+']').html('$' + spe_price.toFixed(2));
    $('.saso-cart-item-price.mob-price-ajax-change[data-id='+item.id+']').html('$' + spe_price.toFixed(2));
  
  }
});

}
});
//setTimeout(function(){ window.location.href="/cart"; }, 1000);
});




// ------------------ End of Ajax cart functions ----------------------\\

#php #ajax

WordPress Ajax Search without plugin [ Easy ] | Code For Developers

<?php 
/*
 ==================
 Ajax Search
======================	 
*/
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetch(){

    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
        success: function(data) {
            jQuery('#datafetch').html( data );
        }
    });

}
</script>

add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
	
	function khFunction(){ // on focusout rest inpput field value
	            jQuery('#datafetch').html( " " );
       }
	
    function fetch(){

	//test if there is at least to caracters on the input field 
      if(jQuery('#keyword').val().length > 2){
			
		
    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
        success: function(data) {
            jQuery('#datafetch').html( data );
        }
    }); }

}
</script>

<?php
}

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 
		'posts_per_page' => -1, 
		's' => esc_attr( $_POST['keyword'] ),
		'category_name' => 'top-apps', 'post_type' => array('post') ) );
	
    if( $the_query->have_posts() ) :
        echo '<ul>';
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>

        <?php endwhile;
       echo '</ul>';
        wp_reset_postdata();  
    endif;

    die();
}

#ajax #checkbox

checkbox in js, send to ajax file

function save_test() {
    showloading();
 
    let AssessmentCategorie = []
    $("input[name='AssessmentCategorie[]']:checked").each(function () {
        AssessmentCategorie.push(parseInt($(this).val()));
    });

 $.post("ajax/save_test.php", {
     
        AssessmentCategorie: AssessmentCategorie,

    }, function (data) {

        $("#save_test").html(data);
        get_test();
        hide_loading();

    });
  
  }

#laravel #ajax

Laravel 9 Ajax Multiple Conditional Dropdown

---------write it in head section in blade template-----------------
<meta name="csrf-token" content="{{csrf_token()}}"> 
  ----------do not use slim version of J Query---------------
    --------Use this before document ready in script tag--------
    <script>
          $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
    </script>
------------------then------------------------------------
 <script>
        $(document).ready(function(){
            $('#country').change(function(){
                var country_id = $(this).val();
                $('#city').html('<option value="">Select City</option>');
                
                $.ajax({
                    url: '/getState/'+country_id,
                    type:'post',
                    success: function(result){
                        $('#state').html(result);
                    }
                });
            });

            $('#state').change(function(){
                var state_id = $(this).val();

              
                
                $.ajax({
                    url: '/getCity/'+state_id,
                    type:'post',
                    success: function(result){
                        $('#city').html(result);
                    }
                });
            });
        });
    </script>
--------------------------web.php code--------------------------
Route::post('/getState/{id}', [PlaceController::class, 'getState']);
Route::post('/getCity/{id}', [PlaceController::class, 'getCity']);
-------------------------Controller Code -----------------------------
  public function getState($country_id){
        $states = State::where('country_id', $country_id)->get();
        $html = '';
        foreach($states as $state){
            $html .='<option value="'.$state->id.'">'.$state->state_name.'</option>';
        }
        echo $html;
    }

    public function getCity($state_id){
        $cities = City::where('state_id', $state_id)->get();
        $html = '';
        foreach($cities as $city){
            $html .='<option value="'.$city->id.'">'.$city->city_name.'</option>';
        }
        echo $html;
    }

#laravel #ajax

Use of Seeder and Faker in Laravel

----------Terminal Command------------------------
php artisan make:seeder BookSeeder
----------BookSeeder Code---------------------------
  use Faker\Factory as Faker;
----------Public function run() code------------------
 $faker = Faker::create();
       for ($i=0; $i < 100; $i++) { 
            $book = new Book;
            $book->book_name = $faker->name;
            $book->book_author = $faker->city;
            $book->save();
        }
----------Database Seeder code public function run()---------------
   $this->call([
            BookSeeder::class
        ]);
------------------php artisan code--------------------------------
php artisan db:seed

#laravel #ajax

Password Hashing Laravel

--------Include this in seeder file-------
use Illuminate\Support\Facades\Hash;
$user->password = Hash::make('12345');

#laravel #ajax

Clone from github and run project laravel

1.go to htdocs folder and open git bash
2. git clone "url taken from remote github link"
3. cd projectName
4. composer update / composer install
5. make database name it with projectname or other
6. you can do npm install if required
7. then make a copy of .env file by using this command
8. cp .env.example .env
9. php artisan key:generate
10. php artisan migrate --seed

#laravel #ajax

Auto ON xampp on windows startup

1. Right click on xampp control and click run as administrator
2. click on config button at top right corner of xampp and tick on Apache and mysql then tick on start control panel minimized
3. Then create a short cut of xampp-control exe file in c drive
4. Then type run at task bar the in RUN type shell:startup then paste the short to that startup folder
5. and thats it now you can restart your computer to check the auto ON functionality.
Thanks!

#laravel #ajax

Run laravel application without php artisan serve command

1. Make a file named index.php in the parent application folder
2. Point this file to the index.php file exits in the public folder by writing this code in that file 
  <?php
 	require_once __DIR__.'/public/index.php';
3. copy .htaccess file from public folder to parent application folder
4. Now change all links and script libraries in layoutfiles with public at start of the href link and also with script src.
5. Now enjoy you have no need to use php artisan serve

Laravel 9 with vue 3 install and run helo vue laravel world

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet