This issue only happens when live on netlify ( despite their prerender option turned off ), not while being served locally.
the live site shows :
<title>about | anonplayer about | anonplayer</title>
title and meta tags are set using the vue-head package like so
head: {
title: {
inner: "about | anonplayer",
separator: ' ',
}, ...
and this happens for all routes of my single page app and also to meta tags where there are two sets of the tags I intended to have.
looks like this
I used the default prerender settings like so:
config.plugins.push(new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: ['/', '/about'].concat(contracts.map(each => `/${each.abi}/${each.contract}`)),
}))
was the same, but with Angular
in my case helped replacing function this.meta.addTag() with this.meta.updateTag()
so think it's not hosting issue)
Related
I'm having a nuxt 3 app with file routing activated. I'm having a problem where I have two routes that should render the same dynamic page.
My pages directory looks like this:
This is how I want my paths render the pages:
(1) / --> [lang]/index.vue
(2) /DE --> [lang]/index.vue
(3) /EN --> [lang]/index.vue
(4) /DE/Header --> [lang]/Header/index.vue
(5) /EN/Header --> [lang]/Header/index.vue
Routes 2 to 5 render correctly. My problem is that route 1 renders /index.vue (which is an expected behaviour), but I want it to render the content from [lang]/index.vue. At the moment I copied the content to have it synced in both index.vue files, but I want to avoid copying the whole file.
I already tried a navigateTo() inside the root index.vue, but that causes both pages to render. Also, I tried to add some router options file like that:
export default <RouterConfig>{
routes: (_routes) => [
{
name: 'index',
path: '/',
component: () => import('~/pages/[id]/index.vue'),
},
],
}
but then no child routes are working anymore.
How can I achieve that route 1 (/) renders the page under pages/[lang]/index.vue?
I have a homepage which is paginated, though when clicking "Next Page" it seems to be looking for a page named /page/1. Is there a way to paginate the index.vue page without creating a brand new page?
I've currently implemented the following on #click.
this.$router.push({
path: '/' + this.page,
query: { },
})
You can have dynamic parameters.
For example
url.com/1
url.com/2
So if your home page is index.vue, you need to create a vue file next to it for a dynamic parameter with name after an underscore, for example _id.vue
So the param after the root URL will be mapped to this page.
For more resources about file system and routing in NUXT
I've just finished building a nuxt.js & contentful website. There are several routes that need to be generated when people hit the website but it doesn't seem to generate all the routes or not recognise some pages unless I refresh. Example - I upload a blog post to contentful and it doesn't appear in the list of blog posts but when I change the text of a blog that is appearing with no issue, I have attached my config generate below
generate: {
routes () {
return Promise.all([
client.getEntries({
'content_type': 'product'
}),
client.getEntries({
'content_type': 'kebaProduct'
}),
client.getEntries({
'content_type': 'blogPost'
}),
])
.then(([productEntries, kebaEntries, blogEntries]) => {
return [
...blogEntries.items.map(entry => `/blog/${entry.fields.slug}`),
...productEntries.items.map(entry => `/products/${entry.fields.slug}`),
...kebaEntries.items.map(entry => `/products/ev-charging/${entry.fields.slug}`),
]
})
}
It works fine when I am on localhost and all the product routes are being generated and updated fine, only some of the 'kebaProduct' routes are being created when I run npm run generate. Not sure what I am missing
Note when I do generate although I have 5 'kebaProducts on contentful' it only generates one .html file not sure what the expected behaviour is.
Figured it out. If some content has been specified and it isn't present in the contentful code then the page will fail to be generated as it will throw an error. You can do checks with v-if for content and conditionally render it that way or make sure all fields are 'required' in the Contentful validations
In my previous Angular app I was able to open my resume in another window like such:
<a class="link popup" href="javascript:void(0);" onclick="javascipt:window.open('./../../assets/Resume_Christopher_Kade.pdf');">Resume</a>
While rewriting my website with Vue, I noted that it did not work as intended, after changing it to:
<a class="link popup" href="javascript:void(0);" v-on:click="openPdf()">Resume</a>
With openPdf() in my component's methods:
openPdf () {
javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf');
}
When clicking the link, a new page opens to the following URL:
http://localhost:8080/assets/Resume_Christopher_Kade.pdf
while showing an empty route on my screen instead of displaying the pdf in the browser's pdf viewer.
This issue might be related to the way I handle routes in Vue:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/work',
name: 'Work',
component: Work
},
{
path: '/posts',
name: 'Posts',
component: Posts
},
{ path: '*', component: Home }
]
})
Why isn't it as straightforward as in Angular? Am I missing something?
Did you figure it out?
My solution is for projects created with Vue CLI 3 running locally (I haven't built my project yet).
My issue was similar to yours. I just wanted <a> link that opened up my pdf file on a new tab but my url concatenated a single hash to my path and redirected me to my home page. And it was a surprisingly easy fix:
resume
Just a dot, forward slash, and my file name. And my file is located under root > public folder.
Relative Path Imports
When you reference a static asset using relative path (must start with
.) inside JavaScript, CSS or *.vue files, the asset will be included
into webpack's dependency graph...
https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
Assuming that you have static folder generated by default by Vue CLI you can simply put the PDF there and do it as follows <a href="./../static/file.pdf" target="_blank">.
I am building an Aurelia application that will not live at the root of the web site. Its URL will be something like this http://mycompany.com/neatoApp.
I have a route configuration that looks like this
{route:['','index'], name:'index',moduleId:'index' nave:true, title: 'neato app home'},
{route:['news'], name:'news',moduleId:'news' nave:true, title: 'neato app news'}
I have System.js configured so that it knows /neatoApp is the baseURL and it downloads all the scripts and things properly.
I have a <base href="/neatoApp" /> element in the head of my app html and I'm using pushState for routing.
The problem is when I navigate to mycompany.com/neatoApp Aurelia reports 'Route not found: /neatoApp'
Router has a baseUrl property that doesn't seem to matter what I set its value to because the route recognizer doesn't use it.
I really don't want to put neatoApp in all my routes for a few good reasons: As the app gets deployed in various places (dev, test, etc) that base path will change making that a headache to maintain. It's not the developers responsibility to know where the app is going to be deployed in various environments and it's not the operations guy's responsibility to update the code to include that base URL when he deploys it. When I do include neatoApp in the routing config it makes navigating behave strangely like generating a link that points to /neatoApp/neatoApp.
Does anybody have a solution to this problem?
I have created a plunker to demonstrate the issue: http://plnkr.co/edit/HPEzClAlncvQkSzjw6ph?p=preview
Check out this plunker to see what needs to be done:
http://plnkr.co/edit/0j6vhbTf4LZw4vOLOUka?p=preview
When you are doing something like a virtual directory where your site looks like this http://mywebsite/subfolder you want to preface your routes, stylesheets, and the baseURL in config.js to have "./" for example:
baseURL: "./"
And index.html would typically look like this:
<script src="./jspm_packages/system.js"></script>
<script src="config.js"></script>
Same with app.js which should look like this:
{ route: "", moduleId: "./src/routes/home", title: "Home", nav: true, name:"home" },
If you are publishing to the root of a web site then you can drop the "./" and just use "/" although technically you can leave the routes with "./" and just change the baseURL and it will still work.
For my MVC 5 app, I use this in my Index.cshtml:
<script src="~/jspm_packages/system.js"></script>
<script>
System.config({ baseURL: "#Url.Content("~/")" });
</script>
<script src="~/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
And have commented out the baseUrl in config.js. BaseUrl needs to be set in the first call to System.config().
System.config({
//baseURL: "./",
defaultJSExtensions: true,
...