Google Autocomplete Vue Componet

Google Autocomplete

I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as simple as I can during my explanation.

Google Autocomplete component is no more than a Vue.js wrapper around the official Google Places API. In spite of the demo written in Vue.js, the Autocomplete object can be pulled in from any JS framework.

Requirements

You will have to install Vue & Vuemit:

npm install vue --save
npm install vuemit --save

The Vuemit library is used to manage the events between the google component and its parent one.

Note: If you happen to be using Vue 1.*, you will have to pull from the vue-1 branch.

Installation

To install this package you just need to open your console and type npm i google-autocomplete-vue --save. If there are any problems during the installation, you can try again using the force param: npm i -f google-autocomplete-vue --save

Getting started

First of all, you have to sign up on Google API Console to get your API key: https://console.developers.google.com Once this has been done, you will have to copy the API KEY given by google and paste it in your JS file entry point. Example:

  • Bootstrap File: bootstrap.js. You will have to require Vuemit in this file to have the events handler set globaly. As so: Example

  • Entry point file: demo.js

Note: Important keys have to be kept within an .env file, so be aware of this while pushing your code to your git control.

Second of all, you will have to import the component in your application entry point, so you can call it globally when needed. Example:

import GoogleAutocomplete from 'google-autocomplete-vue';

Validation on server side

Places validation is a laravel library that will help you out to handle your user addresses. Its aim is making sure addresses submitted by users are valid through 3rd party services, as google.

Take a look at its repository: Places Validation

Guide

  • First of all, you have to create an entry point to compile the component and generate your bundle file. An example is available here.

  • Second of all, you will have to create your vue object to control the component:

require('./bootstrap');

new Vue({

    el: '#demo',

    data:
    {
        output: {}, address: {}, sent: false, response: {}, config: {}
    },

    mounted()
    {
        //Set an event listener for 'setAddress'.
        Vuemit.listen('setAddress', this.onAddressChanged);
        Vuemit.listen('addressWasCleared', this.onAddressCleared);
    },

    methods:
    {
        /**
         * Submit the data to be evaluated.
         *
         * @return {Void}
         */
        submit()
        {
            this.sent = true;
            this.output = this.address;
            this.address = {};
        },

        /**
         * Checks whether the output data is valid.
         *
         * @return {Bool}
         */
        isValid()
        {
            return Object.keys(this.output).length > 0;
        },

        /**
         * Checks whether the output data is not valid.
         *
         * @return {Bool}
         */
        isNotValid()
        {
            return ! this.isValid();
        },

        /**
         * The callback fired when the autocomplete address change event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressChanged(payload)
        {
            if (Object.keys(paypload.place).length > 0) {
                this.address = payload.address;
                this.response = payload.response;
            }
        }

        /**
         * The callback fired when the autocomplete clear event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressCleared()
        {
            this.address = {};
            this.response = {};
        }
    }
});

See the example here.

  • Third of all, you have to compile these two files with browserify, webpack or laravel-elixir-vue-2 to make them readable for every browser. Example:
require('laravel-elixir-vue-2');
var elixir = require('laravel-elixir');

elixir.config.sourcemaps = false;
elixir.config.assetsPath = 'src';

elixir(function(mix)
{
    mix.webpack('demo.js', 'dist/demo.js');
});

See the example here

  • Finally, you can use the component in your HTML file using this syntax:
<google-autocomplete
    class = "input"
    input_id = "txtAutocomplete"
    :config = "{type: ['geocode']}"
    placeholder = "type your address"
>
</google-autocomplete>

:config is the config passed to the Autocomplete constructor of the places API. See the documentation. Config corresponds to the options argument in the doc.

See the example here.

Also, you can pass any css class through the “class” prop.

Contributing

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

License

The MIT License (MIT). Please see License File for more information.

How can I thank you?

Why not star the github repo? Share the link for this repository on Twitter? Spread the word!

Don’t forget to follow me on twitter!

Download Details:

Author: gocanto

Live Demo: https://gocanto.github.io/google-autocomplete/

GitHub: https://github.com/gocanto/google-autocomplete

#vuejs #javascript #vue-js

What is GEEK

Buddha Community

Google Autocomplete Vue Componet

I am Developer

1614263355

Google Places Autocomplete In PHP with Example

PHP 8 google address autocompletes without showing the map. In this tutorial, i will show youhow to create a google autocomplete address web app using google address APIs in PHP.

Note that, Google autocomplete address API will return address and as well as latitude, longitude, place code, state, city, country, etc. Using latitude and longitude of address, you can show markers location in google map dynamically in php.

This tutorial guide to you step by step how to implement google places autocomplete address web application without showing google maps in PHP.

For implementing the autocomplete address in php, you will have to get the key from google console app. So, just go to the link https://cloud.google.com and get the google API key.

https://www.tutsmake.com/php-google-places-autocomplete-example/

#autocomplete address google api php #google places autocomplete example in php #google places autocomplete example without map in php #php google places autocomplete jquery #php google places autocomplete jquery example

Ethan Hughes

Ethan Hughes

1578335505

Collection of Good Vue Autocomplete Components for Your Vue.js App

The Vue AutoComplete component helps users by providing a list of suggestions to select from as they type. It supports data binding, filtering, and more.

1. vue-suggestion

Suggestion list input for Vue.js, inspired by v-autocomplete.
Your search engine, your CSS, your everything…

vue-suggestion

Demo

Download


2. Accessible Autocomplete

Accessible autocomplete component for vanilla JavaScript and Vue.

Features

  • Accessible, with full support for ARIA attributes and keyboard interactions. Based on the WAI-ARIA Authoring Practices.
  • Available as a JavaScript or Vue component, with React coming soon.
  • Core package available if you want to bring your own rendering layer.
  • Customizable. Easily bring your own CSS, or take full control of the component rendering.
  • Support for asynchronous data fetching.

Autocomplete

Demo

Download


3. Select Auto-Complete

Provides a capability of auto-completed searching for results inside a select input field.

Select Auto-Complete

Download


4. vue-cool-select

Select with autocomplete, slots, bootstrap and material design themes.

Features

  • no dependencies
  • props (30) allow you to customize a component in a various ways
  • slots (13) allow content to be changed anywhere
  • events (8) will let you know about everything
  • autocomplete (you can use custom search, you can also disable the search input)
  • keyboard controls (not only through the arrows)
  • support on mobile devices
  • validation, state of error and success
  • disabled and readonly
  • small and large sizes (as in bootstrap)
  • the ability to set your styles, you can write theme from scratch. 2 themes: Bootstrap 4 (equal styles), Material Design
  • TypeScript support
  • tab navigation
  • SSR (Server-Side Rendering)
  • auto determine the suitable position for the menu if it goes beyond the viewport

vue-cool-select

Demo

Download


5. Vue Form Autocomplete - Simple

Vue Form Autocomplete Custom Component.

Able to use single or multiple select. Use scope slot to change the template

Vue Form Autocomplete - Simple

Demo and Download


6. Vue Tags Input

A simple tags input with typeahead built with Vue.js 2.

Vue Tags Input

Demo

Download


7. At.js for Vue.

At.js is An autocompletion library to autocomplete mentions, smileys etc.

  • Filter/Scroll/Insert/Delete
  • Keyboard/Mouse events
  • Plain-text based, no jQuery, no extra nodes
  • ContentEditable
  • Avatars, custom templates
  • Vue2
  • Vue1

At.js for Vue

Demo

Download


Thank for read!

#vue-autocomplete #autocomplete-component #autocomplete #vue-js #autocomplete-vue

Luna  Mosciski

Luna Mosciski

1600583123

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

Google's TPU's being primed for the Quantum Jump

The liquid-cooled Tensor Processing Units, built to slot into server racks, can deliver up to 100 petaflops of compute.

The liquid-cooled Tensor Processing Units, built to slot into server racks, can deliver up to 100 petaflops of compute.

As the world is gearing towards more automation and AI, the need for quantum computing has also grown exponentially. Quantum computing lies at the intersection of quantum physics and high-end computer technology, and in more than one way, hold the key to our AI-driven future.

Quantum computing requires state-of-the-art tools to perform high-end computing. This is where TPUs come in handy. TPUs or Tensor Processing Units are custom-built ASICs (Application Specific Integrated Circuits) to execute machine learning tasks efficiently. TPUs are specific hardware developed by Google for neural network machine learning, specially customised to Google’s Machine Learning software, Tensorflow.

The liquid-cooled Tensor Processing units, built to slot into server racks, can deliver up to 100 petaflops of compute. It powers Google products like Google Search, Gmail, Google Photos and Google Cloud AI APIs.

#opinions #alphabet #asics #floq #google #google alphabet #google quantum computing #google tensorflow #google tensorflow quantum #google tpu #google tpus #machine learning #quantum computer #quantum computing #quantum computing programming #quantum leap #sandbox #secret development #tensorflow #tpu #tpus

Teresa  Bosco

Teresa Bosco

1598685221

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