Hello Artisans,

I'm trying to create a simple app to learn Laravel with VueJS. I created a JetStream sample app with InertiaJS but seem to have gotten stuck on something that is probably just related to a fundamental misunderstanding.

I have added a link to my navigation section, which renders a Vue component, which uses GridJS to display a list of all users. Now when I check in Chrome's DevTools Network tab, the request seems to route correctly, but the template in the page doesn't get added to the DOM. I have some JS in the same document which gets a link hook, and it then uses that to look up a querySelector, but doesn't find it. The link is in the same file but within a template block, so the template block contents are obviously not being added to the DOM.

Here is my route:

Route::get('/user/view', function() {
    return Inertia::render('UserList');
})->name('user.view');

Here is my Vue component (just relevant part):

<template>
   <div class="row">
       <div class="col-lg-12">
          <div js-hook-url="{{ route('user/fetch') }}" js-hook-table-users></div>
       </div>
   </div>
</template>

<script>
import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css";

const USER_TABLE = "[js-hook-table-users]"
const TABLE_USERS_WRAPPER = document.querySelector(USER_TABLE);
const TABLE_USERS_URL = TABLE_USERS_WRAPPER.getAttribute("js-hook-url");

So the error happens on the last line there, because the node does not exist in the DOM and so is not picked up by the querySelector, so getAttribute gets called on null.

Again, I'm sure this is a fundamental issue being new to Laravel and Vue.

TIA