I'm having some issue implementing Inertia into an existing application. Im able to compile the mix assets and load the default blade template no problem but my components dont seem to be rendering correctly. The setup is for the most part exactly as outlined in the inertia docs with some slight variations to account for the existing projects structure. There are no error logs and the 'Mounted' log (from the component) is also nowhere to be found which makes me suspect the components are not being mapped properly in my current setup.
resources dir structure
resources
- js
-- vue
--- inertia
---- inertia-app.js
---- inertia-test.vue
inertia-app.js
import Vue from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue'
createInertiaApp({
resolve: name => require(`./${name}`),
setup({ el, app, props }) {
new Vue({
render: h => h(app, props),
}).$mount(el)
},
})
webpack.mix.js
...
mix.js([
"resources/js/vue/inertia/inertia-app.js",
], 'public/js').vue().version().sourceMaps();
...
inertia-test.vue
<template>
<p>THIS IS A TEST</p>
</template>
<script>
export default {
mounted: function() {
console.log('Mounted');
}
}
</script>
rendered blade template
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link href="/css/app.css?id=3a479dde74cc2b520b46" rel="stylesheet">
<script src="/js/inertia-app.js?id=e3e5e13afc8146300d50" defer=""></script>
</head>
<body>
<div id="app" data-page="{"component":"inertia-test","props":{"errors":{}},"url":"\/qw8jz84\/inertia-test","version":"6bca9dd41bc5d3fd81283a1ea0fe8e16"}"></div>
</body>
</html>
NOTE: inspecting the /js/inertia-app.js it does seem to be loading with the vue component so maybe it is the mapping?
...
/***/ "./resources/js/vue/inertia sync recursive ^\.\/.*$":
/*!*************************************************!*\
!*** ./resources/js/vue/inertia/ sync ^\.\/.*$ ***!
\*************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
var map = {
"./inertia-app": "./resources/js/vue/inertia/inertia-app.js",
"./inertia-app.js": "./resources/js/vue/inertia/inertia-app.js",
"./inertia-test": "./resources/js/vue/inertia/inertia-test.vue",
"./inertia-test.vue": "./resources/js/vue/inertia/inertia-test.vue"
};
...
