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.
Related
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.
I am using Vue.js and I want to try to render components but it isn't working
main.js:
import Vue from 'vue';
import 'bulma';
import Navbar from './Navbar.vue';
Vue.component('navbar', Navbar);
const MyC = Vue.component('myc', {
template: '<h1>Are you working?</h1>',
});
const root = new Vue({
el: '#app',
components: {
Navbar, MyC,
},
});
index.html
<body>
<div id="app">
<navbar></navbar>
<myc></myc>
</div>
<script src="dist/build.js"></script> <!-- Webpack endpoint -->
</body>
Navbar.vue
<template>
<h1>HELLO FROM NAVBAR</h1>
</template>
<script>
// Some logic here
export default {
name: 'navbar',
};
</script>
I coded as written in guide but neither of the ways to render a component is working
I just have blank page
I am using webpack+vue-loader
[UPDATE]
It works without components imports just rendering template
[UPDATE 2]
Got this message
[Vue warn]: Unknown custom element: <navbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
move your code from index.html to app.vue, index.html is a html file but not a vue file
try it , now it will be work , happy life.
//main.js
import Vue from 'vue'
import App from './App'
Vue.component('myc', { //gobal components
template: '<h1>Are you working?</h1>',
})
new Vue({
el: '#app',
template: '<App><App/>',
components: {
App
}
})
//index.html
<body>
<div id="app">
</div>
<script src="dist/build.js"></script>
</body>
//app.js
<template>
<div class="app">
<navbar></navbar>
<myc></myc>
<div
</template>
<script>
import navbar from 'path of Navbar.vue' //local components
export default {
name: 'app',
component:{
navbar
}
}
</script>
I've moved everything to App.vue
render: h => h(App) worked for me
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>.
I've set up routing in angular that works perfectly correct within application, however if I navigate to my about page for example so http://localhost:9000/about and refresh the page I get error saying "Cannot GET /about", same happens if I open a new tab and paste url there and visit the page.
My boot.ts file containint routing logic
// -- Typescript typings -------------------------------------------------------
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/jqueryui.d.ts" />
//Imports ----------------------------------------------------------------------
import {Component, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
Router,
RouteConfig,
} from 'angular2/router';
// -- Application Imports ------------------------------------------------------
import {NavbarComponent} from './components/navbar.component';
import {HomePage} from './pages/home.page';
// -- Enable production module -------------------------------------------------
enableProdMode();
// -- Component ----------------------------------------------------------------
#Component({
selector: 'main-app',
directives: [ ROUTER_DIRECTIVES, NavbarComponent ],
template: `
<app-navbar></app-navbar>
<router-outlet></router-outlet>
`
})
// -- Routing ------------------------------------------------------------------
#RouteConfig([
{ path: '/', name: 'root', redirectTo: ['/Home'] },
{ path: '/home', name: 'Home', component: HomePage }
])
// -- Class --------------------------------------------------------------------
export class MainApp {
constructor(public router: Router) {}
}
// -- Bootstrap for application ------------------------------------------------
bootstrap(MainApp, [
ROUTER_PROVIDERS
]);
the index.html file
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Angular2 starter</title>
<!-- Application css -->
<link href="dist/libraries/bundle.css" rel="stylesheet"></link>
<link href="dist/styles/main.css" rel="stylesheet"></link>
</head>
<body>
<main-app>Loading...</main-app>
<!-- Application js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="dist/libraries/bundle.js"></script>
</body>
<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({defaultJSExtensions: true});
</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script>
//bootstrap the Angular2 application
System.import('dist/app/boot').catch(console.log.bind(console));
</script>
</html>
and project structure
dist/
app/
components/
navbar.component.js
pages/
home.page.js
boot.js
assets/
typings/
src/
... original files that are compiled into dist here
index.html
In your boot.ts, put this:
import { bootstrap } from "angular2/platform/browser";
import { bind } from "angular2/core";
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router";
bootstrap(MainApp, [
ROUTER_PROVIDERS,
bind(LocationStrategy).toClass(HashLocationStrategy)
]);
Your URL's will be with #/home
To complement what Vlado said, with the default strategy you need a server configuration to redirect all your paths to your HTML entry point file. With the hashbang approach it's not necessary...
You could have a look at these questions about this issue:
When I refresh my website I get a 404. This is with Angular2 and firebase
PathLocationStrategy vs HashLocationStrategy in web apps
Is Angular 2's Router broken when using HTML5 routes?
Hope it helps you,
Thierry
enable hashes with your routes
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });