I have a vuepress site which lives in my current vuejs app at /docs.
I am building the site into the main /dist folder and deploying them together.
When I am adding a link to the navbar in the .vuepress/config.js file the base is always appended or if adding the full URL it creates an external link.
module.exports = {
base: "/docs/",
dest: "dist/docs",
themeConfig: {
nav: [
{ text: 'Home', link: 'https://myapp.com/'},
{ text: 'Guide', link: '/guide/'}
],
}
}
I can change the way external links are handled, but this is site wide and I do not want this to apply to all links.
In short:
{ text: 'Home', link: '/'} // this is directing to /docs due to base
I would like, for this to direct to myapp.com
Related
We have a Vue application that we're deploying to a subdirectory: /deploypath/
Right now, we have vue.config.js as:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === 'production'
? '/deploypath/'
: '/',
transpileDependencies: [
'vuetify'
]
})
Here's what's happening: In index.js (router) I have multiple paths configured to return multiple views and components. When a user is logged in, they can access additional pages. When they're not logged in, they're redirected to a (landing page).
I have multiple routes defined:
const routes = [
{
path: '/deploypath',
name: 'feature1',
component: FeatureOneView,
meta: {
title: 'Feature One',
}
},
{
path: '/deploypath/notloggedin',
name: 'notloggedin',
component: NotLoggedInView,
meta: {
title: 'Landing',
}
}
]
const router = new VueRouter({
mode: 'history',
routes: routes
});
Now, the issue I'm running into is that (after deploying a production build) when I visit /deploypath it works, however any other path (e. g. /deploypath/notloggedin) doesn't work. We have an Ubuntu instance running with nginx.
Are we doing something wrong with the Vue config or is there an issue on the nginx side, or other?
In case it helps anyone, a good buddy of mine helped find a solution:
cd /etc/nginx/sites-available
then:
sudo vim <insert your site's conf file here>
then press "i" to edit and within the top-level server { ... } section paste in (replace "dirname" with the name of the subdirectory you're hosting your Vue application in):
location ^~ /dirname {
try_files $uri /dirname/index.html =400;
}
then press escape (esc) on keyboard, then type ":wq" and press enter to save..
Then run:
sudo service nginx restart
then refresh your browser window and hopefully you see your Vue app!
I am trying to change the default url of a page in nuxt project. My newly created page is one.vue and it's inside the pages folder. I added the following code inside nuxt.config.js file.
router: {
routes: [
{
path: "/notone",
component: "pages/one",
},
],
}
I need to redirect to the one.vue page by entering the url in the browser as /notone. But it will give 404 error. It's working only for /one. Where I was wrong?
You can use router-extras to add more flexibility to Nuxt's router. Check my answer here: https://stackoverflow.com/a/68166208/8816585
Basically, going to one.vue and setting
<router>
{
alias: [
'/notone',
]
}
</router>
should be enough.
module.exports = {
publicPath: './src/pages/home/Homepage.vue',
pages: {
'Home': {
entry: 'src/pages/home/main.js',
template: 'public/index.html',
title: 'Home page',
chunks: [ 'chunk-vendors', 'chunk-common', 'Home' ]
},
'Map': {
entry: 'src/pages/map/main.js',
template: 'public/index.html',
title: 'Map page',
chunks: [ 'chunk-vendors', 'chunk-common', 'Map' ]
}
}
}
My app can't seem to get my home page. Am I using the public path correctly? For reference, this is a multipage app. I'm not sure what I should set my base url to since this is the first time I've made anything with Vue. I'm using Vue/Cli. It runs, but says it cannot get my linked page. How do I fix this?
publicPath is for deployment only - it is not path to your (DEV) file system but path following the domain name when the app is deployed.
Documentation
By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'
I have a portfolio site portfolio.com and a subdomain which points to a VueJS frontend hosted on Netlify vuejsapp.portfolio.com
Users upload files to the app and it generates a download link URL, say vuejsapp.portfolio.com/download/048677a. When I navigate to the link within the VueJS app (by clicking a button to redirect after it's uploaded) it redirects to the Download component without issue. But if I copy and paste that link directly in my browser it throws a 404 error. Why is this?
I know it has to do with a Vue Router configuration but I can't seem to find much information about it or perhaps I'm looking in the wrong place. Could someone tell me what I'm missing or point me to some relevant documentation please?
My router.js file:
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About
},
{
path: "/download/:id",
name: "download",
component: Download,
props: route => ({ id: route.params.id }),
}
]
});
Since the code/setup is running properly on your local environment and only breaking on Netlify its pretty clear that you're running into a wrong server configuration issue.
Your Netlify environment has to know that it should always route any requests to / and leave the routing to your Vue App. You can read more about how to resolve that in the Netlify docs.
I have my Nuxt app and I'm trying to add Vuepress on it.
I did yarn add vuepress#next -D then created the docs folder and a readme.md file in there.
The problem: The project only shows the sidebar and navbar if the .vuepress folder is outside of the docs folder; If it's inside, it won't work - Not respecting the config.js rules.
Also, it's recognising the readme.md from the Nuxt app (outside from docs folder too), not the one inside docs folder.
Can anyone help me with that?
Another question, if this above works, Am I be able to access through localhost:3000/docs instead of localhost:3000 for the Nuxt project and localhost:8080 for the docs?
That's my current folder structure (no sidebar showing - not respecting the config.js inside the .vuepress folder):
docs
|__.vuepress
| |__config.js
|
|__guides
The config.js file:
module.exports = {
title: 'Documentation',
description: 'Documentation',
themeConfig: {
sidebar: 'auto',
nav: [{
text: 'Home',
link: '/'
},
{
text: 'Guides A',
link: '/guides/apis/'
},
{
text: 'item with subitems',
items: [{
text: 'Subitem 01',
link: '/'
},
{
text: 'SubItem 02',
link: '/'
}
]
},
{
text: 'External',
link: 'https://google.com'
},
]
}
}
Vuepress version 1.0.2
Thanks.
Why you need to use both of these? If you using Nuxt you don't actually need VuePress. Check the official VuePress documentation.
Nuxt
Nuxt is capable of doing what VuePress does, but it is designed for building applications. VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.