I am using laravel 10 and vue 3. My routes not working . I don't know where is the problem. Here is the code.
welcome.blade.php
<div id="app">
#vite('resources/js/app.js')
</div>
app.vue
<template>
<div >
<h2>Laravel 10</h2>
<router-view></router-view>
</div>
</template>
app.js
import './bootstrap';
import {createApp} from 'vue';
import app from './layouts/app.vue';
import router from './routes.js';
createApp(app).use(router).mount('#app');
routes.js
import { createWebHistory,createRouter} from "vue-router";
import Home from './pages/Home.vue';
import register from './pages/auth/admin/register.vue';
import login from './pages/auth/admin/login.vue';
const routes = [
{
path:'/home',
name:'Home',
component:Home,
},
{
path:'/register',
name: 'register',
component:register,
},
{
path:'/login',
name:'Login',
component:login,
}
];
const router = createRouter({
// mode:'history',
history:createWebHistory(),
routes,
});
export default router;
It works fine when I have defined createApp(app).mount('#app'); but it's not working when I defined createApp.use(router).mount('#app');
This error occurs Failed to load resource: the server responded with a status of 404 (Not Found)
Related
I'm new to Vue and Inertia Js, so far I understand that in Inertia, u can call Vue components with layouts, like navbar and sidebar etc.
but what I'm trying to achieve is to create a layout of the whole app, that consists of multiple vue files for example like this,
<template>
<NavbarVue/>
<Home/>
<Kenapa/>
<Cerita/>
<Karir/>
<Lowongan/>
<Media/>
<Gabung/>
<Mitra/>
<Download/>
<Footer/>
</template>
<script setup lang="ts">
import NavbarVue from '../components/Navbar.vue';
import Home from '../pages/Home.vue';
import Media from '../pages/Media.vue';
import Kenapa from '../pages/Kenapa.vue';
import Cerita from '../pages/Cerita.vue';
import Lowongan from '../pages/Lowongan.vue';
import Karir from '../pages/Karir.vue';
import Gabung from '../pages/Gabung.vue';
import Mitra from '../pages/Mitra.vue';
import Download from '../pages/Download.vue';
import Footer from '../components/Footer.vue';
</script>
In vue.js, I can create a layout for the app like that, by creating a template for different vue files like Home page, Kenapa page etc.
But in Inertia Js, this is the app.js file
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
What should I do to achieve that ?
You must use a persistent layout for that.
Layout.vue
<template>
<div>
<Navbar />
<slot /> <!-- Don't forget this -->
<Footer />
</div>
</template>
<script setup lang="ts">
import Navbar from '../components/Navbar.vue';
import Footer from '../components/Footer.vue';
</script>
MyPage.vue
<script>
import Layout from './Layout'
export default {
layout: Layout,
}
</script>
<script setup>
defineProps({ user: Object })
</script>
<template>
<H1>My Page</H1>
<p>Hello {{ user.name }}, welcome to my page!</p>
</template>
Hello i'm new to laravel and mix. for now i'm getting through jeffrey way vue tutorial. this course caused many issues. what made me confused and somehow disappointed is new problem. in episode 26 (there) when i tried to run watch command that threw a new error:
WARNING in ./resources/assets/js/views/Home.vue?vue&type=template&id=6c0a33b2 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet1.rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/assets/js/views/Home.vue?vue&type=template&id=6c0a33b2) 6:30-48
export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default)
could anyone help me?
EDIT:
contents of project files:
route.js (assets/js):
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home')
}
];
export default new VueRouter({
routes
});
Home.vue (assets/js/views):
<template>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class='panel panel-default'>
<div class="panel-heading">
Home page
</div>
<div class="panel-body">
I'm an example compnoent!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
app.js (used as entry point, saved in assets/js)
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router
})
bootstrap.js (assets/js):
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
route.js (assets/js):
import router from './routes';
You said your router file name route.js but you imported routes! Make sure your file name is correct or import correctly.
I am creating a single page application using laravel and vue. it's not loading index component on page load.
web.php
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');
Welcome.blade.php
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
router.js file
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const routes = [
{ path: '/', component: require('./components/IndexComponent.vue') },
{ path: '/login', component: require('./components/LoginComponent.vue') }
]
const router = new VueRouter({
routes:routes,
mode:'history'
})
export default new VueRouter({router})
app.js file
require('./bootstrap');
window.Vue = require('vue');
import vuetify from './vuetify';
import router from './router';
import Index from './components/IndexComponent';
import Login from './components/LoginComponent';
var app = new Vue({
el: '#app',
router,
vuetify,
components: {
'index-component':Index,
'login-component':Login
}
});
Index Component (IndexComponent.vue)
<template>
<router-link to="/" class="nav-item nav-link">Home</router-link>
<router-link to="/login" class="nav-item nav-link">Login</router-link>
<router-view></router-view>
</template>
I had the same problem. Open your project in chrome and press Ctrl + Shift + I (Open console). Now after the login you can see that there is a warning which says: No match for favicon.ico. To solve this problem you go to your routes file and define a redirect:
{
path: '/favicon.ico',
redirect: '/user/dashboard'
}
So I'm trying to create a a settings page that has child routes. For example, I want to have /settings/user, then /settings/branches, etc. However, everytime I load /settings or any of its child routes it only shows the parent Settings component.
Here is my routes.js file
// Imports
import Vue from 'vue';
import VueRouter from 'vue-router';
import Store from './store';
// Set to use
Vue.use(VueRouter);
// Views
import Home from './views/Home/';
import UserIndex from './views/UserIndex';
// Grab Routes
import Settings from './routes/Settings'
// Create our routes
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/users',
name: 'users.index',
component: UserIndex,
},
].concat(Settings);
Here is my Settings.js (which is later contacted in my main routes folder)
// Routes for /Settings/
import Settings from '../views/Settings/';
import Branches from '../views/Settings/Branches';
const routes = [
{
path: '/settings',
name: 'settings',
component: Settings,
children: [
{
name: 'branches',
path:'branches',
component: Branches
}
]
}
]
export default routes;
/views/settings/Branches.vue
<template>
<div>
<p>Branches page</p>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
/views/settings/index.vue
<template>
<div>
<p>settings page</p>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
Just include <router-view></router-view> to settings page, so it can render its own children. Then you can navigate to it through /settings/branches link.
Reference
<template>
<div>
<p>Settings page</p>
<router-view></router-view>
</div>
</template>
I try to implement VueRouter in Laravel project but arreas error Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App'
import ExampleComponent from './components/ExampleComponent'
import ExampleComponent1 from './components/ExampleComponent1'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
component: ExampleComponent
},
{
path: '/example',
component: ExampleComponent1
}
]
})
const app = new Vue({
el: '#app',
router,
template: `<app></app>`,
components: {
App
}
})
components/App.vue
<template>
<div>
<div>
<router-link :to="'/'"></router-link>
<router-link :to="'/example'"></router-link>
</div>
<div>
<router-vue></router-vue>
</div>
</div>
</template>
<script>
export default {
}
</script>
how can I connect correctly vue-router?
I see that you've misspelled <router-view /> in App.vue which is probably causing the warning.