'Inertia, laravel and vue 2 - blank vue component - vue file not rendering, div is blank

Im trying to render a vue component through inertia like so:

return Inertia::render('override', [
   [
       'test' => '1'
   ]
]);

The file exists in assets/js/Pages.

My app.js looks like the following:

import Vue from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    Vue.use(plugin)

    new Vue({
      render: h => h(App, props),
    }).$mount(el)
  },
})

However, the div is rendering as blank

enter image description here

My override.vue file is as follows:

<template>
  <p>Hello , welcome to your first Inertia app!</p>
</template>

<script>
  export default {
    mounted() {
        console.log("ss");

    },
    created() {
        console.log("ss");

    }
  }
</script>

App.blade.php contains

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Laravel Inertia CRUD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    @inertiaHead
    <script src="{{ asset('/js/app.js') }}" defer></script>
</head>
<body>
    <div class="container">
        @inertia
    </div>
</body>
</html>

EDIT

It wont even console log() from the mounted call

laravelvue.jsinertiajs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions