When I build my Vue project, (router history mode), it only shows the navbar and commented the < router-view > element.
On local machine, it works as expected, rendering some basic content.
Here are some appropriate files:
App.vue
<template>
<Head>
<title>Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="prefetch stylesheet">
</Head>
<Navbar/>
<router-view/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Navbar from "#/components/includes/Navbar.vue";
export default defineComponent({
name: 'App',
props: {
},
components: {
Navbar
}
});
</script>
<style lang="scss">
#import "assets/css/general";
</style>
Router's index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: import('#/views/Home.vue'),
},
{
path: '/tv',
name: 'television',
component: import('#/views/Television.vue'),
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Apache is configured well. I can't really see the mistake, when I build production version, it is without error.
Related
I've been fiddling with Vue for a side project and have been trying to implement routing using vue-router, but I can't seem to find a solution to this TypeError I'm getting, which is preventing the site to load at all on localhost:
Uncaught TypeError: Cannot read properties of null (reading 'parent') vue-router.mjs:2478
Here is how I've set up each of my files:
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
router.js
import { createWebHistory, createRouter } from "vue-router";
import Home from "#/views/Home.vue";
import About from "#/views/About.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes: routes,
});
export default router;
App.vue
<script setup>
import Navbar from "./components/Navbar.vue";
</script>
<template>
<RouterView />
<Navbar />
</template>
<style scoped></style>
Navbar.vue
<template>
<nav class="navbar navbar-expand-md navbar-custom">
<RouterLink class="navbar-brand" to="/">
<span class="navbar-brand-logo"></span>
</RouterLink>
...
</nav>
</template>
Home.vue
<template>This is the homepage.</template>
About.vue
<template>This is the about page.</template>
I'm rocking Vue v3.2.41 and vue-router v4.1.6. Not exactly sure what's going wrong here. When I pull out use(router) from main.js, the navbar I have renders, so it's clearly something going wrong with vue-router. Would appreciate any help with it!
In your app.vue or anywhere you want to re-use your component make sure to define your imported component in a components property like this:
<script>
import Navbar from "./components/Navbar.vue";
export default {
...
components: {
Navbar
},
</script>
After installing fresh installation of Laravel i installed VueRouter and after implementing simple code for that such as below, i can't use VueJs and i don't get any error in terminal:
commands don't show any error and i get build successful from Laravel mix
/resources/js/app.js content:
GITHUB project link:
import Vue from "vue";
import VueRouter from 'vue-router';
import ExampleComponent from "./components/ExampleComponent";
require('./bootstrap');
const routes = new VueRouter(
{
mode:'history',
routes:[
{
path:'/',
component:ExampleComponent
}
]
}
);
const app = new Vue({
el: '#app',
routes
});
/resources/js/bootstrap.js content:
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
app.blade.php content:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
welcome.blade.php content:
#extends('layouts.app')
#section('content')
<div class="container">
<router-view></router-view>
</div>
#endsection
laravel web.php content:
Route::get('/{any}', function () {
return view('welcome');
})->where('any','.*');
simple piece of laravel composer.json:
"require": {
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.4",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.12",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.2"
},
webpack.mix.js content:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
and then:
php artisan serve && npm run watch
i have empty page after navigating to / in browser http://127.0.0.1:8000
how can i resolve this issue to use vuejs?
Concerning Vue router, what I usually have is a separated router.js file because it can be lengthy:
import Vue from 'vue'
import Router from 'vue-router'
...
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/users',
name: 'users',
component: () => import('./views/users/_users.vue'),
}
...
]
export default router
And in main.js I have:
import router from './router' // path to router.js file
...
Vue.router = router
...
export default new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
These constraints are appearently superfluous: ->where('any','.*').
And the route might not match - or .htaccess might be absent;eg. to capture regex (.*) into variable $page for any method:
Route::any('(.*)', function($page) {
// dd($page);
return view('welcome');
});
Not sure, but you probably also need to Vue.use(VueRouter); the docs also initialize differently:
const app = new Vue({routes}).$mount('#app')
I mean, there is no debug information and there are even two ways how to install VueRouter.
In dev mode everything works fine but after building with static it's just blank page! I've seen a lot of issues but no one is similar to mine.
router/index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Main from '#/components/Main'
import BrandPage from '#/components/BrandPage'
import Article from '#/components/Article'
Vue.use(Router)
console.log("Router");
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: Main,
props: dynamicPropsMain
}
...
]
})
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false;
console.log("main");
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
console.log("App");
}
}
</script>
<style>
</style>
Also I'm logging every component this way:
mounted() {
console.log("Main");
}
And this is what I see in console when I open the index.html file from dist folder:
There's no an error btw!
I changed all paths to relative in index.html as you can see:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>cosmetic</title>
<link href=./static/css/app.6e402e4fa684582f062c00087423d24c.css rel=stylesheet>
</head>
<body>
<script src=https://use.fontawesome.com/5c25b8d8cc.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js></script>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=./static/js/vendor.5f799c4e5a271a20f280.js></script>
<script type=text/javascript src=./static/js/app.3990053e5416194b5d89.js></script>
</body>
</html>
These all make me to think that the problem with router and I don't know how to check deeper...
Please anyone help me with that!!! I'll be very grateful!
Are you just trying to open the index.html? This will not work.
In order to use your Vue application, you have to serve the entire dist folder over a Web server.
I want to create simple links to components via Vue-router plugin.
For that I created a routes.js file like this :
import VueRoute from 'vue-router';
let routes = [
{
path: '/',
component: './components/Home'
},
{
path: '/About',
component: './components/About'
}
];
export default new VueRoute({
routes
});
And there is app.js file like this :
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import router from 'routes';
window.Vue = Vue;
window.axios = axios;
Vue.use(VueRouter);
new Vue({
el: '#app',
router
});
And this is my master page content :
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app.css">
<title>My First Laravel Vue App </title>
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/About">About</router-link>
</div>
<script src="/js/app.js"></script>
</body>
</html>
But After compiling all js files when I open page,router-link does not work and just creates a simple empty html comment instead.
I do not know what is problem and how Can I solve that.
Update:
I changed import router from 'routes'; to import router from './routes' and all things worded fine!
you have everything setup but fforgot the router-view
Add it like this:
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/About">About</router-link>
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
The matched routes are rendered in the router-view
EDIT
The component property of the route object should be the component itself but you are passing it a string
So do it like this:
import VueRoute from 'vue-router';
import Home from './components/Home'
import About from './components/About')
let routes = [
{
path: '/',
component: Home
},
{
path: '/About',
component: About
}
];
export default new VueRoute({
routes
});
Getting started with Vue 2 and nothing renders via vue-router. I do not receive any errors in the console, so I think I'm missing something very basic. (The app component is just the standard one that ships with the installation, so it should be fine.)
main.js
import Vue from 'vue';
import vuex from 'vuex';
import axios from 'axios';
import routes from './routes';
import VueRouter from 'vue-router';
Vue.use(vuex);
Vue.use(axios);
Vue.use(VueRouter);
let router = new VueRouter({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 },
routes
});
new Vue({ router }).$mount('#app');
routes.js
import App from './App';
let routes = [
{ path: '', component: App },
{ path: '/', component: App }
];
export default routes;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello';
export default {
name: 'app',
components: {
Hello
}
};
</script>
Version
vue: 2.1.0
vue-router 2.1.1
The index.html is missing <router-view></router-view>.