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.
Related
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)
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'
}
there is no error in my code or console. But my router-view doesn't appear anything. I work with laravel 7 in this project
This is my app.js
// import Vue from 'vue';
import VueRouter from "vue-router";
import App from './components/App';
import Newsfeed from "./views/Newsfeed";
require('./bootstrap');
window.Vue = require("vue");
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Newsfeed },
]
const router = new VueRouter({
routes,
mode: 'history'
})
const app = new Vue({
components: {
App
},
router: router
}).$mount('#app');
This is my App.vue
<template>
<div class="flex flex-col flex-1 h-screen overflow-y-hidden">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
This is my Newsfeed.vue
<template>
<div class="flex flex-col items-center py-4">
Hello
</div>
</template>
<script>
export default {
name: "Newsfeed"
}
</script>
Can you help me? Thanks!
I'm experiencing a weird issue in vue. I've set up a component to view details of an item, this component accepts props and renders on first load but when i reload the page, the entire component disappears including the Root.
I've tried to name router-view but it doesn't work.
MainApp.vue
<template>
<div class="container">
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default{
}
</script>
Routes.js
import ViewProduct from './store/View.vue'
const routes = [
{
name: 'viewProduct',
path: 'product/:id/view/:slug',
component: ViewProduct,
props: true
}
];
export default routes;
Main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({ mode: 'history', routes});
import MainApp from './MainApp'
import store from './store/store/index'
new Vue({
el: '#storeapp',
render: h => h(MainApp),
router,
store: store,
});
I have another router-view container which works fine but this one does not.
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.