Hi, So I am using an example to to learn about multi-tenant architecture and I have hit a road block. My vue components are not rendering when I login into the home.blade.php file. I also don't get any alarms. One thing I have noticed is the structure of the code example I am using has been changed from what comes with laravel but regardless here is what i got
This is the home.blade.php file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Ticketing System</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts anf CSS -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
</div>
</body>
</html>
Here is the app.js file
window.Vue = require('vue');
//Imports
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
import App from '@/App'
import routes from '@/routes.js'
//Load Plugins
Vue.use(VueRouter)
Vue.use(Vuetify)
//Router configuration
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router,
render: h => h(App),
});
Here is the app.blade.php file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
@yield('content')
</v-container>
</v-content>
</v-app>
</div>
<script>
new Vue({ el: '#app' })
</script>
</body>
</html>
and this is what is in the webpack.mix.js file.
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
mix.webpackConfig({
resolve: {
alias: {
'@': __dirname + '/resources/assets/js'
},
},
})
Now This is the structure the /resources directory was changed to
assets: {
js: {
api:{},
components: {},
config:{},
app.js,
App.vue,
routes.js,
sidebarLinks.js
}
},
lang: {},
views: {}
Any help would be greatly appreciated!!
