New with Algolia on Laravel and Vue

Hello, folks! Greetings from Brazil!

I’m coding a new project using Laravel and Vuejs and reached the point of making a search.
I have followed the tutorials with absolutely no success!

Here’s my codes:

app.js
require(’./bootstrap’);

window.Vue = require(‘vue’);
import InstantSearch from ‘vue-instantsearch’;
import instantsearch from ‘instantsearch.js’;

Vue.use(InstantSearch);

import Buefy from ‘buefy’
Vue.use(Buefy);

// Vue.component(‘example’, require(’./components/Example.vue’));

// var app = new Vue({
// el: ‘#app’,
// data: {}
// });

(document).ready(function() { // Dropdowns (’.dropdown’).hover(function(e) {
$(this).toggleClass(‘is-open’)
})
})

Model Marca.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;
// const instantsearch = require(‘instantsearch.js’);

class Marca extends Model
{

public function modelos(){
return $this->hasMany('App\Modelo');

}
}

And here is my Blade:

@extends('layouts.manage')

@section(‘content’)

Gestão de Marcas

         <ais-input placeholder="Search contacts..."><ais-input>

       <ais-results>
         <template scope="{ result }">
           <div>
             <h1>@{{ result.logotipo }}</h1>
             <h4>@{{ result.descricao }}</h4>
             <ul>
               <li>@{{ result.email }}</li>
             </ul>
           </div>
         </template>
       </ais-results>

      </ais-index>

    </div>
    <div class="column">
      <a href="{{route('marcas.create')}}" class="button is-primary is-pulled-right"><i class="fa fa-user-plus m-r-10" aria-hidden="true"></i> Cadastrar nova Marca</a>
    </div>
  </div>
  <hr class="m-t-0">
  <div class="columns is-multiline">
  @foreach ($marcas as $marca)
    <div class="column is-one-third">
      <div class="box">
        <article class="media">
            <div class="media-left">
  			      <figure class="image is-64x64">
  			        <img src="{{ asset('/images/' . $marca->logotipo) }}" alt="Image">
  			      </figure>
		           </div>
              <div class="media-content">
                <div class="content">
                  <h3 class="title">{{$marca->descricao}}</h3>
                </div>
                <div class="columns is-mobile">
                  <div class="column is-one-half">
                    <a href="{{route('modelos.show', $marca->id)}}" class="button is-primary is-fullwidth">Detalhes</a>
                  </div>
                  <div class="column is-one-half">
                    <a href="{{route('marcas.edit', $marca->id)}}" class="button is-light is-fullwidth">Editar</a>
                  </div><br>
                  <hr>
                </div>
                <nav class="level">
                <div class="level-item has-text-centered">
                  <div>
                    <p class="heading">Modelos</p>
                    <p class="title">{{ $marca->modelos->count() }}</p>
                  </div>
                </div>
                <div class="level-item has-text-centered">
                  <div>
                    <p class="heading"><a href="{{ route('modelos.create', ['id' => $marca->id]) }}" class="has-text-black"> ADICIONAR</p>
                    <p class="title"><i class="fa fa-car" aria-hidden="true"></i></a></p>
                  </div>
                </div>
                </nav>
              </div>
        </article>
      </div>
    </div>
  @endforeach
  </div>
</div>
  {{$marcas->links()}}

@endsection

The problem is:
The input field is NOT rendering on the page. I think it must be an minor error, but can’t see.

Any help?
Cheer’s

1 Like

Hey there,

It looks like you are trying to mix 2 different libraries.

  1. Vue InstantSearch
  2. InstantSearch.js

Vue InstantSearch can be used without InstantSearch.js, and according to the syntax in your blade file, it looks like you are trying to use Vue InstantSearch.

You should remove the import instantsearch from ‘instantsearch.js’; import statement, and uncomment the Vue code at the end of the Javascript code.

Is there a specific reason for having un-commented the Vue code?

The regarding the rest of your code, it is a bit hard to review because it is not formatted.
Could you wrap it inside of ``` characters so that we get the correct output?

Thank you a lot,

2 Likes

Thanks for the tip. I’ll try removing the InstanSearch.js and uncomment the Vue code. But I didn’t comment it. Weard…

Working just fine!
Thanks!

1 Like