VueJS template not rendering in Laravel 7

Question

It appears that my js is compiling correctly but for some reason my Vue template is not rendering. I am not seeing that it is mounting in the console either, but no errors.

It was working, then I upgraded to Laravel 8 and had problems with Tailwind compiling. I downgraded to 7 and removed tailwind. CSS and JS seem to be compiling correctly but template still is not rendering.

PetSearch.blade.php

@extends('layouts.services')
<!--@section('title', 'Pet Search') -->

@section('content')

        <div id="results">
          <petfinderapi></petfinderapi>
        </div>

@endsection

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('petfinderapi', require('./components/PetfinderAPI.vue').default);

// Vue.component('vetapi', require('./components/YelpAPI.vue').default);

const app = new Vue({
  el: '#services'
});

PetFinderAPI.vue

<template>
<!-- input form for pet search HEROKU TEST-->
<div id="petSearchInput" class="container-fluid" style="width: auto;">
  <div class="form-group">
    <label for="searchZip">ZipCode</label>
    <input type="text" name="zipCode" value="" class="input-sm" placeholder="Zipcode Required" style="width: auto;" v-model='searchZip' required>

    <label for="animal">Animal Type</label>
    <select name="type" v-model='animalType'>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="bird">Bird</option>
      <option value="horse">Horse</option>s
      <option value="barnyard">Barnyard</option>
      <option value="reptile">Reptile</option>
      <option value="smallfurry">Small Furry</option>
    </select>

    <label for="age">Age</label>
    <select name="age" v-model='animalAge'>
      <option value=''>Any</option>
      <option value="Baby">Baby</option>
      <option value="Young">Young</option>
      <option value="Adult">Adult</option>
      <option value="Senior">Senior</option>
    </select>

    <!-- todo: add approximate weight to size labels -->
    <label for="size">Size</label>
    <select name="size" v-model='animalSize'>
      <option value=''>Any</option>
      <option value="S">Small</option>
      <option value="M">Medium</option>
      <option value="L">Large</option>
      <option value="XL">Extra Large</option>
    </select>

    <label for="sex">Sex</label>
    <select name="sex" v-model="animalSex">
      <option value=''>Any</option>
      <option value="M">Male</option>
      <option value="F">Female</option>
    </select>
    <div>
      <input class="btn btn-secondary" style="color: white;" type="submit" id="submitZip" @click="getPet(); showBtn();">
      <input class="btn btn-secondary" value="Clear" style="color:white;" type="button" id="reloadForm" @click="reloadForm();">
    </div>
  </div>
  <!-- <div><strong><h4>Page Number {{pageNum}}</h4></strong></div>
    <div><strong><h4>Offset {{lastOffset}}</h4></strong></div>
    <div><strong><h4>Number of items {{ itemCount }} </h4></strong></div>
    <div><strong><h4>Remainder {{ remainder }} </h4></strong></div> -->
  <div id="petDisplay" class="container-fluid d-flex p-1 m-0">
    <div class="row">
      <div id="prev" class="col-md-1" style="display:none;">
        <button type="button" class="btn btn-sm" style="height: 100%;" id="prevBtn" @click="previousPage();">
          <span class="arrow-icon"><i class="fas fa-arrow-circle-left fa-2x"></i></span>
        </button>
      </div>
      <div class="row col-md-10">
        <div id="frame" style="min-width: 210px;" class="col col-md-4" v-for="pet in displayArray" v-if="showOutput">
          <div class="border border-dark p-2">
            <div><strong>Name:</strong> {{ pet.name }}</div>
            <div><strong>Location:</strong> {{ pet.city }}</div>
            <div><strong>Age:</strong> {{ pet.animalAge }}</div>
            <div><strong>Sex:</strong> {{ pet.animalSex }}</div>
            <div><strong>Size:</strong> {{ pet.animalSize }}</div>
            <div><strong>Breed:</strong> {{ pet.breed }}</div>
            <div><strong>Contact Email:</strong> <a style="font-size: 13px" :href="'mailto:'+ pet.email">{{ pet.email }}</a></div>
            <div><strong>Contact Phone:</strong> {{ pet.phone }}</div>
            <img id="petImage" :src="pet.image" width="200" height="auto" class="image-responsive" />
            <div class="m-2">{{ pet.description }}</div>
            <div id="petOptions">
              <i class="fas fa-paw fa-1x pr-1"></i>
              <ul>
                <li v-for="petOptions in newOptionsArray">{{ petOptions }}</li>
              </ul>
              <i class="fas fa-paw fa-1x pr-1"></i>
            </div>
          </div>
        </div>
      </div>
      <div id="next" class="col-md-1" style="display:none;">
        <button type="button" class="btn btn-sm" style="height: 100%" id="nextBtn" @click="nextPage();">
          <span class="arrow-icon"><i class="fas fa-arrow-circle-right fa-2x"></i></span>
        </button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
    name: 'petfinderapi',
    mounted() {
      console.log ('Mounted successfully!');
    },
    data: function() {
        return {
            showOutput: false,
            output: 'basic',
            searchZip: '',
            petsArray: [],
            // option: '',
            newOptionsArray: [], // array of manipulated options from api
            animalType: '',
            animalSize: '',
            animalAge: '',
            animalSex: '',
            itemCount: 3,
            pageNum: 0,
            remainder: 0,
            // lastOffset: 0,
            prevBtn: '',
            nextBtn: '',
            showError: false,
            errorMsg: '<h1>There was an error. Please try again.</h1>',
            noMatchesFound: '<h1>Sorry, but we did not find any matches.<h1>',
            showStatus: true,
            fetchingStatus: '<h1>Fetching a list of potential new best friends...</h1>',
            apiRequest: null,
            apiKey: "Pzl6OrmbLxqQuKEejdrl2EBMrVfaYGoboHsw4e1zb8ztBRHL5u",
            apiSecret: "9EWRCDwHXJIAowYJ3xmRa438xDseehynjYsQQJMQ",
        }
        created: function() {
          this.$url.get("https://api.petfinder.com/v2/animals")
      .then(res => {
        this.data = res.data;
      });
  }
}
},

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "artisan": "^0.1.2",
        "bootstrap": "^4.0.0",
        "bootstrap-sass": "^3.4.1",
        "cross-env": "^7.0.3",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^7.3.1"
    },
    "dependencies": {
        "axios": "^0.19",
        "heroku": "^7.47.5",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.9",
        "node": "^15.0.0",
        "node-forge": "^0.10.0",
        "vue": "^3.0.4",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^4.0.0",
        "webpack-cli": "^4.2.0",
        "webpack-config": "^7.5.0",
        "webpack-mix": "^3.0.0"
    },
    "peerDependencies": {}
}

I don't see a div with an ID services in your HTML, but you seem to be mounting your Vue app on it — blex
– blex, Commented Dec 13, 2020 at 16:57
Are you sure you referring to the file accurately? I see references to PetFinderAPI and PetfinderAPI (require version). Notice the uppercase F. — trk
– trk, Commented Dec 13, 2020 at 17:03
@brombeer I an inline background image set up as src, but removed those and included it in my CSS instead. This is an old app that I haven't worked on for a while so I'm trying to clean everything up, as I go. — Beth
– Beth, Commented Dec 13, 2020 at 22:51
@blex You are correct. That was a mistake. My main layout blade is services.blade.php. The template is mounted to div ID results in petSearch.blade.php which extends the services layout. — Beth
– Beth, Commented Dec 13, 2020 at 22:55

user8034901 · Accepted Answer · 2020-12-13 16:56:47Z

1

const app = new Vue({
  el: '#services'
});

is "running" Vue inside an element with id="services". You don't have such element.

Change <div id="results"> to <div id="services">

answered Dec 13, 2020 at 16:56

user8034901

Sign up to request clarification or add additional context in comments.

5 Comments

Beth Over a year ago

I tried that. I also changed el: to results and left div id as "results". That did not work either. I am completely baffled as it was working before I tried to upgrade to Laravel 8.

user8034901 Over a year ago

Did you recompile your assets after making the changes? npm run dev or better npm run watch when developing. Any errors in your browser console?

Beth Over a year ago

I used to see that Vue was running in the console, as well. I don't see that anymore. If I add some basic HTML to the petSearch blade, it renders just fine.

user8034901 Over a year ago

Laravel 7 used Vue2 iirc, maybe downgrade

Beth Over a year ago

I changed to Vue2 and also downgraded back to node12 from node15. It still does not work. For some reason, it doesn't appear to be recogniing my HTML in the template.

Collectives™ on Stack Overflow

VueJS template not rendering in Laravel 7

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related