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!
Related
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'
}
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.
When I changed mode to history, the hash from the URL is removed, but components are not loading. This is app.js:
window.Vue = require('vue');
import VueRouter from 'vue-router';
var index = Vue.component('index',
require('./components/frontend/testingIndexComponent.vue'));
var component1 = Vue.component('component1',
require('./components/frontend/testingComponent.vue'));
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: index },
{ path: '/component1', component: component1 }
]
})
const app = new Vue({
router
}).$mount('#app')
this is web.php
Route::get('/{vue_capture?}', function () {
return view('index4');
})->where('vue_capture', '[\/\w\.-]*');
this is index4.blade.php
<body>
<div>
<h1>Header</h1>
<!-- <a><router-link tag="li" to="projects">
sdds
</router-link></a> -->
</div>
<div id="app">
<a><router-link to="component1">
sddsdadadssa
</router-link></a>
<router-view>
</router-view>
</div>
<div>
<h1>Footer</h1>
</div>
<script type="text/javascript" src="{{URL::to('public/js/app.js')}}">
</script>
remove
mode: 'history'
and use
hashbang: false,
history: true
instead
I try to work with vuejs in laravel, I installed npm vue-router vue-axios but when i try to load my page i get console error like: ReferenceError: CreateCategory is not defined and empty page.
here is my app.js:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
import App from './App.vue';
Vue.component('CreateCategory', require('./components/CreateCategory.vue'));
Vue.component('DisplayCategory', require('./components/DisplayCategory.vue'));
Vue.component('EditCategory', require('./components/EditCategory.vue'));
const routes = [
{
name: 'CreateCategory',
path: '/categories/create',
component: CreateCategory
},
{
name: 'DisplayCategory',
path: '/',
component: DisplayCategory
},
{
name: 'EditCategory',
path: '/edit/:id',
component: EditCategory
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');
// const app = new Vue({
// router,
// render: h => h(App)
// });
// const app = new Vue({
// el: '#app'
// });
PS: I read articles about component in router and I already tried with .default that won't work neither they only good of that was i didn't get console error.
UPDATE
my CreateCategory.vue component:
<template>
<div>
<h1>Create A Category</h1>
<form v-on:submit.prevent="addCategory">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Category Title:</label>
<input type="text" class="form-control" v-model="category.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Category Status:</label>
<input type="text" class="form-control col-md-6" v-model="category.status" />
</div>
</div>
</div><br />
<div class="form-group">
<button class="btn btn-primary">Add Category</button>
</div>
</form>
</div>
</template>
<script>
export default {
data(){
return{
category:{}
}
},
methods: {
addCategory(){
let uri = 'http://localhost/vuetjd/public/categories';
this.axios.post(uri, this.category).then((response) => {
this.$router.push({title: 'DisplayCategory'})
})
}
}
}
</script>
CreateCategory.vue is a Single File Component.
In there, you must have a export default {}, where {} is actually the Component Object.
What you have to do, is that, you need to import the CreateCategory.vue and then assign it, like so:
import CreateCategory from './components/CreateCategory.vue';
const routes = [
{
name: 'CreateCategory',
path: '/categories/create',
component: CreateCategory
}
];
now this will work.
you have to do the same for DisplayCategory and EditCategory.
I found what is the issue, I'm suppose to run php artisan serve to be able to see my data. if just open my url i'll get blanck page but with serve i get my data as well.