I'm trying to build a very simple website using vue.
When running npm run serve all components used get displayed, when running npm run build the site was empty.
I adapted the vue.config.js file and added the publicPath as seen in other posts to get rid of the issue with a completely empty page and 404 file errors.
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
publicPath: '',
transpileDependencies: true
})
after adding the publicPath everything but the RenderView get's rendered.
My App.vue file looks like this:
<template>
<div class="nav">
<nav class="container">
<div class="nav-wrapper">
<router-link to="/" class="brand-logo">website name</router-link>
<ul class="right">
<li><router-link to="/" >Home</router-link></li>
<li><router-link to="/contact-imprint" >Contact</router-link></li>
</ul>
</div>
</nav>
</div>
<router-view/>
</template>
When hovering over the RouterLinks the File Path seems messed up as well.
The js Error Console remains empty.
The router/index.js file looks like this:
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/Home.vue')
},
{
path: '/contact-imprint',
name: 'contact',
component: () => import('../views/Contact.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
If anyone has some ideas why this behaviour is caused I'd be very happy to hear.
thank you very much in advance!
well, this took quite a while for me. apparently you cannot test the vue app directly from your dist folder. I moved all files to my server directory (running apache) and everything worked as it should.
Related
I have a program made in VUE that works for me locally but stops working when compiling.
The idea is that within the initial VUE App.vue file I load content from other files, in this case the Home.vue file
App.vue
<template>
<v-app>
<v-app-bar app color="primary" dark>
V.4.0
<v-spacer></v-spacer>
2022
</v-app-bar>
<v-main>
<router-view/>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
};
The index.js of the routes
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: function () {
return import(/* webpackChunkName: "about" */ '../views/Home.vue')
}
},
{
path: '/llistat',
name: 'Llistat',
component: function () {
return import(/* webpackChunkName: "about" */ '../views/Llistat_feina.vue')
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
</script>
the Home.vue
<template>
<v-container>
<h1>Bienvenido</h1>
<router-link to="/Llistat">1. Llistat</router-link><br>
</v-container>
</template>
<script>
export default {
name: 'Home',
components: {
},
}
</script>
If I run it locally it works fine. Load the App.vue, find the path and insert the Home.vue
If I compile it and upload it to the server, it does not load the content of Home.vue, it only loads the code of App.vue
Any idea what might be going on? Thanks
You must configure your web server to serve index.html for all non-existent filenames instead of returning HTTP status code 404 - or to switch your VueRouter to hash mode instead of history. You must also properly set publicPath in vue.config.js and base in VueRouter - they must be the same and reflect the folder on the web server where your Vue application is being served from.
So using router/index.js I managed to at least get the home page displayed. Now I have moved the code to main.js to simplify it for this question, and not even the home page loads. I only get the vue logo:
main.js:
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from '#/pages/Home.vue'
import DiscussionPage from '#/pages/DiscussionPage.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/discussion-page/:id',
name: 'DiscussionPage',
component: DiscussionPage,
props: true
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
const forumApp = createApp(App)
forumApp.use(router)
forumApp.mount('#app')
Here's the template from the homepage (Home.vue inside src/pages):
<template>
<div class="home">
<p>This is the home page</p>
<div class="discussions" v-for="discussion in discussions" :key="discussion.id">
<router-link :to="{name: 'DiscussionPage', params: {id: discussion.id}}">
{{ discussion.word}}
</router-link>
</div>
</div>
</template>
There was no issues getting the discussions data before I added vue-router, is why I am not including that part of the code. Also, before I moved the code to main.js the url would change when clicking the router-link for the discussion page, but the page would not load.
I am using vue-router4 and I built the app using the CLI with the default vue3 option.
Any clues of what it is I am doing wrong? I am sure it is anobvious little detail, but I can't find it :-(
Thank you so much :-)
This was really silly, but I guess it is still worth publishing for beginners?
For the vue-router to work, one must add the router-view tag. I guess I could have added it in my home page as Bulent suggested. But I think it makes more sense to add it in App.vue so that affects the whole app.
I have to say that this is not clear at all from the current documentation: https://next.router.vuejs.org/guide/#router-link
So simply adding this on App.vue activated the router, and all works well now :
<template>
<router-view/>
</template>
my single page application is not working and after running my app there is blank page logging in the console that path is required in the router configuration.
this is my main.js
import Vue from 'vue' import VueRouter from 'vue-router';import App from './App.vue'import {routes} from './routes.js'; Vue.use(VueRouter); const router=new VueRouter({routes});new Vue({el: '#app',router:router , render: h => h(App)})
this is my routs.js
import User from './components/User/User.vue';import Home from'./components/Home.vue';import App from './App.vue';export const routes=[{ path:'', component: Home },{ Path:'/user', component:User}];
this is my app temlate
<template> <div class="container">
<div class="row">
<div class="col-lg-12 col-md-6 col-xs-12 col-sm-8 col-sm-offset-2 col-md-offset-3"><h1 class="text-center mt-3">Routing</h1><hr><router-view></router-view>
</div>
</div>
other components are also set like this.
I expected that the app page will be rendered.
In routes.js, For the second route you are adding path as Path, You have to give 'path'. P should be lowercase like this.
routes: [{ path: "/", component: Home }, { path: "/user", component: Hello }]
It would be easier to get to grips with your code if you put some line returns in there.
I can't see your closing </template> tag. That would be an issue.
In your routes.js, try: routes=[{ path:'/', component: Home }{ path:'/user', component:User }] - note the path for home is '/'
Hope that helps
The app works fine on every browser, but when I "Add it to my Home Screen" on my iPad, it loads only the "main" component but none of the children.
Here's my main.js :
import Vue from 'vue'
import router from './router'
import App from '#/App.vue'
Vue.config.productionTip = false
const app = new Vue({
router,
render: (h) => h(App)
}).$mount('#app')
My App.vue :
<template>
<div id="app">
<div class="bg">BEFORE VIEW</div>
<router-view class="view"></router-view>
<div class="bg">AFTER VIEW</div>
</div>
</template>
<script>
require('./assets/styles.css')
</script>
My router/index.js :
import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from '#/components/Parent'
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Parent },
{ path: '/products',
component: Parent
},
{ path: '/clients',
component: Parent
},
{ path: '/verticals',
component: Parent
}
]
})
and the components/Parent.vue :
<template>
<div class="parent">
<p>INSIDE PARENT</p>
</div>
</template>
<script>
export default {
name: 'Parent'
}
</script>
Basically this is meant to be a kind of slide show, the Parent component will detect the current Route and go to the appropriate slide.
As I mentionned, the app works very well both on my desktop (on Chrome) and on my iPad (on Safari), but when I do "Add it to my home screen", all I see are the "BEFORE VIEW" and the "AFTER VIEW" from the App.vue (and the #app element has the right background color) but everything in the just doesn't load.
I feel like an idiot, I'm sure the solution just depends on a tidbit of knowledge I'm missing, but I can't seem to find anyone else with a problem close enough to mine that I can use their solution.
Please help, thank you so much for your time !
I randomly found a solution that makes the desired content appear.
In router/index.js, I removed the line
mode: 'history',
I honestly don't understand yet why it worked, but it does. I'll look further.
Thanks to everyone who took a look at my problem !
I have 2 router links that link to the same page (definition page) but has different ids, in my definition page I have an if else loop that checks the id and then posts the apropriate definition for that id.my problem is that my loop can't properly read my id and goes straight to my else statment, this is the closest that I've gotten it to work.
My 2 router-links in page 1
<router-link :to="{ path: '/Pulse/Definition',id:'Alignment'}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>
<router-link :to="{ path: '/Pulse/Definition'}" id="Trust" append><a >Read more ></a></router-link>
My definition page
<template>
<div class="PulseDefinition page row">
<h2 v-if=" id=='Alignment'">hello world {{id}}</h2>
<h2 v-else-if=" id=='Trust'">hello world {{id}}</h2>
<h2 v-else>Sorry try again</h2>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.PulseDefinition{
margin-top:2.5rem;
margin-left:3rem;
background-color: aquamarine;
width:50rem;
height:50rem;
}
</style>
Router
import Vue from 'vue';
import Router from 'vue-router';
import Community from '../components/PulseCommunity';
import Home from '../components/Home';
import Definition from '../components/Definition.vue';
Vue.use(Router)
export default new Router({
routes:[
{
path:'Tuba',
name:'Tuba',
component: Default
},
{
path:'/Pulse',
name:'Pulse',
component:PulseNav,
children:[{
path:'/Pulse/Overview',
name:'Overview',
component:Overview
},
{
path:'/Pulse/Personal',
name:'Personal',
component:Personal
},
{
path:'/Pulse/Community',
name:'Community',
component:Community
},
{
path:'/Pulse/Definition/:id',
name:'Pulse Definition',
component:Definition
}
]
},
{
path:'/Coaching',
name:'Coaching',
component:Coaching
},
{
path:'/Comunication',
name:'Comunication',
component:Comunication
},
{
path:'/Home',
name:'Home',
component:Home
},
]
})
Normally when your using the router inside of a Vue application you'll want to use route parameters, check out the dynamic routing link here.
Using the same example:
const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:id', component: User }
]
})
Here in our router whenever we navigate to a url where /user/ is present providing we then add something after we can match the /:id section of it. Then inside of our component we are able to query the parameters for the ID that was sent in our url:
console.log(this.$route.query.id)
Using this we could then save that value into our component or we could build reactivity around this.$route.query.
In your case you'd only need to append to the string that you pass into that router link by simply using your data / methods or if you require further rules you could use a computed method. This might become or something simmilar:
<router-link :to="{ path: '/Pulse/Definition'+ this.alignmentType}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>
i found a solution thx to the help of li x and a senior coworker of mine,here is the awnser.
my working router-link in page 1
<router-link :to="{ path: '/Pulse/Definition/'+'Alignment'}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>
im adding the id(Alignment) to my url with[:to="{ path: '/Pulse/Definition/'+'Alignment'}"]
my definition page
<template>
<div class="PulseDefinition page row">
<h2 v-if=" this.$route.params.id=='Alignment'">hello world {{this.$route.params.id}}</h2>
<h2 v-else-if=" this.$route.params.id=='Trust'">hello world {{this.$route.params.id}}</h2>
<h2 v-else-if=" this.$route.params.id=='undefined'">Sorry try again {{this.$route.params.id}}</h2>
<h2 v-else>XXXSorry try againXXX{{this.$route.params.id}}</h2>
<!-- {{console.log("hi")}} -->
</div>
</template>
<script>
// console.log(this.$route.query.id);
export default {
}
</script>
im using [this.$route.params.id] to retrieve my id, and my router page stayed the same.
thank you all for the great help ;)