Using the Vuepress Blog plugin for a Vuepress blog website, is there a way to have posts at the root of the website?
E.g. I have foo.com with a post named post-1. I can show a PostIndex at foo.com/ but when I click on a post it goes to foo.com/posts/post-1. What I want is for a post to be at foo.com/post-1
I tried moving my posts out of the /posts folder into the project root and in the following config.js
plugins: [
[
'#vuepress/blog',
{
directories: [
{
id: 'post',
// dirname: 'posts',
dirname: '/',
path: '/',
// Avoid dates in URLs
itemPermalink: '/:regular'
}
]
}
]
]
I tried to change directories[0].dirname to /. This results in a "Page Not Found".
I know I can have post-1 at the root in Vuepress without the Blog plugin, but I'm trying to use the Blog plugin's pagination and other features.
If anyone else is having this issue, it seems to be that the directories[0].itemPermalink: '/:regular' makes the permalink not work. Changing to directories[0].itemPermalink: '/:slug' solves the issue.
Internally, Vuepress Blog plugin must be checking for the string "slug".
Related
I'm preparing to deploy my first Static app from a Nuxt.js 2 project.
While the static routes are generated fine, my dynamic routes are not. Once I remembered they were hidden in my dropdown menu - duhh - I created a /generate page which renders all my dynamic routes using the nuxt-link component. My assumption was that the crawler should find the /generate/index.vue page and thus the links on it, and crawl those.
It didn't.
Then I noticed a comment from Sebastien Chopin mentioning that SSR should be enabled when generating Static apps. Ok. So I re-enabled SSR and I've hit nothing but errors. A couple I've figured out but this latest one has got me stumped.
Some googling has not revealed a clue that appeared relevant - or at least I didn't recognise them as relevant - so I need the 'worldwide developers' team help.
Does this error suggest there's an issue in Vue itself? I don't use 'self' anywhere in my app code soooo... hmmm?
Cheers,
Jeremy
Well it's generating now (has been for a few weeks, been a busy time!)... however the generated pages are not outputting with content, but I think that's a different issue.
My configuration currently is;
target: 'static',
ssr: false,
generate: {
minify: false, // Nuxt 2.15.4 > Deprecated next major version > Use build.html.minify instead!
routes: dynamicRoutes
}
I'll keep working on it.
When creating a standard vue app (using vue-cli v3.0) and including #feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)
The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)
I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.
So I tried this but had no luck at all:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathers/commons',
'#feathers/errors',
'#feathers/feathers',
'debug'
]
}
and got errors even in chrome: Uncaught ReferenceError: exports is not defined
I created a project to show this error: https://github.com/riescorp/vue-internet-explorer
One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.
I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start
I've not had to do anything else in my projects, that I can remember.
I finally manage to solve this issue.
This is the babel.config.js config that does the trick:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
}
Also there was a typo in my vue.config.js it should look like this:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathersjs',
'debug'
]
}
Finally, when using feathers this line wouldn't work:
.configure(restClient.fetch(window.fetch))
so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)
There is a requirement of SEO optimization in nuxt.js project. It requires every route inside the project need add a trailing slash. How to solve the problem?
By the way, there is a question about it, but the accepted answer is not right for me. the question link is here:
Hi :) You need install #nuxtjs/redirect-module and add below rule to nuxt.config.js.
redirect: [
{
from: '^.*(?<!\/)$',
to: (from, req) => req.url + '/'
}
]
My answer is based on antonku's answer.
The answer from #kanapka94 is correct but incomplete. You need to add the module to your modules attribute in your nuxt configuration, e.g:
modules: [
'#nuxtjs/redirect-module',
]
My project structure is as follows:
I have the following webpack config file:
module.exports = {
context: __dirname + "/resources",
entry: "./js/entry.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
and open up my entry.js file with
require('./style.scss');
I understand this specific arrangement might not be working, but i have been trying different permutations and setups and configurations for over an hour and just can't seem to get webpack to find my .scss file.
Can someone please tell me how the webpack config file should be set up in my case?
Cheers.
edit,
trying to go up two levels in my require,
require('../../scss/style.scss')
still gives me,
Similarly for
require('../scss/style.scss');
The problem is in the require statement
require('./style.scss');
It will search for your style file inside the resources/js directory in reference to your entry.js file try requiring your style using this:
require('../scss/style.scss');
Try to use path module for resolving the context path:
var path = require('path');
...
context: path.resolve("resources"),
...
Let me know if the problem resolved.
Well I feel like a complete idiot, after renaming files and folders numerous times and trying different permutations of my require statement, I noticed the error seems to constantly state
Can't resolve 'style' in ...
Turns out i had not installed style-loader and css-loader into my project having though they were bundled with the sass-loader. (it's actually noted on the npm page), running
npm install css-loader style-loader -D
in my project directory solved the issue.
Still, thanks for your suggestions, and I hope this might help someone in the future.
I'm getting a cross domain error when trying to load a custom class. Here is my directory structure
lib
/dijit
/CustomClass1
gic
/dijit
/CustomClass2
CustomClass2 inherits from CustomClass1, but this is where I'm getting the cross domain error.
I'm including the require in CustomClass2:
require("lib.dijit.CustomClass1");
I believe I need to add a module path. I tried the statement below (with many variations) but I haven't gotten it to work. Any ideas?
dojo.registerModulePath("gic", "gic");
Cross domain refers to retrieving the javascript files from a server that is not the domain that is serving the web application itself. An example is loading dojo from a CDN.
http://dojotoolkit.org/reference-guide/1.7/quickstart/cross-domain.html
From what you posted, I can't tell if you are using dojo from a CDN or not. If you are, then this link should help you configure your module path:
http://dojotoolkit.org/documentation/tutorials/1.6/cdn/
If not, then it is important to note that the second parameter is a directory path and is relative to dojo.js
dojo
dojo.js
lib
dijit
gic
dijit
dojo.registerModulePath("lib", "../lib");
dojo.registerModulePath("gic", "../gic");
If you are having this problem doing a custom build, then you need to set prefixes in the profile:
prefixes: [
[ "dijit", "../dijit" ],
[ "lib", "../lib" ],
[ "gic", "../gic" ]
]