[Vuejs]-Trying to transform a Laravel only project into a Vue + Laravel project. Vue component not mounting

by

0👍

You add your javascript before the element with id homepage exists.

The default index.html by a Vue app looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" />
    <title>Example App</title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but this app doesn't work properly
        without JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

When the scripts are injected, they are put at the end of the body tag:

<!-- ... -->
    <div id=app></div>
    <script src=js/chunk-vendors.feedbeef.js></script>
    <script src=js/app.baadf00d.js></script>
  </body>
</html>

You should try adding your scripts last and debugging from there:

@extends('lib.master.main')

@section('styles')
@stop

@section('title')
    - Homepage
@stop

@section('content')
    <div id="homepage"></div>
@stop

@section('scripts')
    <script src="{!! asset('js/homepage/homepage.js') !!}" type="text/javascript"></script>
@stop

Leave a comment