show custom page during building process in vue js - vue.js

i want to show a custom html page while building my vue js project (npm run build)
as you know while building process dist folder not exists and after build process we have dist folder .
how can i show a custom page until build is completely done?
i found this answer in a forum but how can i use that?
i dont think this is proper way!
axios.interceptors.response.use(function (response) {
if ( response.status === 503 ) {
return to maintenance page
}
return response;
});

Hi can you explain what do you want to achieve. It seems you are using VUE version that is lower than VUE CLI 3. If you want a custom page (error page, static page, 404 page, redirection page and etc.) you can still use vue router. Adding a page after a build is not a good idea since there is no route for that when you already build your project. Install vue router, create a router file or if you already have router add this.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import PageNotFound from '#/views/pages/NotFoundPage'
import 404Page from '#/views/pages/404Page.vue'
import StaticPage from '#/views/pages/StaticPage'
const router = new Router({
routes: [
{
path: '/static',
name: 'Static Page',
component: StaticPage
},
{
path: '/404',
name: '404 Page',
component: 404Page
},
{
path: '*',
name: 'PageNotFound',
component: PageNotFound
}
]
})
export default router
You just need to redirect the user using these from your view files
this.$router.push('/static')
this.$router.push('/404')
if there are no matching route the user will automatically redirected to Page Not Found page

Related

Loading problems when sharing a link on a site with Vue

I' ve created a website that uses Vue as front-end framwork and the CMS CosmisJS to manage the content. My site uses, among other things, Vue Router, Vuex and Vue Meta and is hosted on Netlify.
My site works fine, you can navigate between the different routes and the information loads without problems, however, when I share a link with a route, for example, http://example.com/route, the page simply doesn't load and shows me a Netlify error that says "Page Not Found" even though the route exists and can be visited if you navigate from the root route.
I can't figure out where the problem is. I thought it might be an error related to load times with API calls or some error in my Vue Router configuration, but I have made changes and the problem still persists.
Any idea what it could be?
Here is a simplified version of my Vue Router.
import Vue from "vue";
import VueRouter from "vue-router";
import CentroEstudios from "../views/CentroEstudios.vue";
import Nosotras from "../views/Nosotras.vue";
import Index from "../views/Index.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Index",
component: Index,
},
{
path: "*",
name: "NotFound",
component: NotFound,
},
{
path: "/centro-de-estudios",
name: "Centro de Estudios",
component: CentroEstudios,
},
{
path: "/nosotras",
name: "Nosotras",
component: Nosotras,
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
This is a consequence of using history mode on the router.
https://router.vuejs.org/guide/essentials/history-mode.html
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.
You need to configure Netlify to be compatible with history mode:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps
Here is another relevant post on the netlify support forum:
https://answers.netlify.com/t/vue-app-not-routing-correctly-when-deployed/6363
Or, if it's ok for the purposes of the website you're making, you can also just use the default hash mode and then you do not have this issue but you will have a hash before in all the URL paths.

vue application in php page with router hotlinking

I am currently building a module for a CMS (Joomla) - the frontend of this module is created with VUE 3 incl. Router. The prototype is already working and can be integrated into the CMS Module. Also the router works. If a link is clicked within the VUE app, the corresponding view is displayed. But if the user is now on a subpage of the VUE App and refreshes it (F5 / Ctrl + F5), the page is not found - i think because it exists only in the Vue Router.
To the URL structure:
domain.tld <-- This is where the Vue application is located.
domain.tld/list-:id/item-:id <-- This is the URL for an ITEM
Now I know that it doesn't work like that because the webserver tries to interpret the URL which it can't because parts of it are from VUE.
Is it possible to reconfigure the vue router to work with parameters instead of a "physical" structure?
from: "domain.tld/liste-:id/item-:id"
to: "domain.tld?liste=:id&item=:id"
i think this could solve the issue but i dont know...
Edit:
When i try to use this in the router it still works but has the same effect because yeah "appname" cannot be found by the server..
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/appname?playlist=:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/appname?playlist=:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
]
You can assign a controller to a wild-card, which always return you Vue app:
$router->addMap('/domain.tld/*', 'VueController');
Another approach would be using a # in your URL. Everything after your # will be ignored by the server.
Based on the information i've got from Roman i have changed the routes and added a 404 to the router which refers to home. The views are now been loaded as "url params".
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/#appname?playlist-:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/#appname?playlist-:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
{
// Match all paths vue2 Use * vue3 Use /:pathMatch(.*)* or /:pathMatch(.*) or /:catchAll(.*)
path: "/:pathMatch(.*)*",
name: "404",
component: Home
}
]
If now someone tries to open a site via directlink he got redirected to home.
There might be a better solution but this works when you are using vue inside another PHP app where you are not able to configure the server.
additional info for 404:
https://qdmana.com/2020/12/20201223195804176T.html
It looks that Hotlinks (directly into a view) are not possible in my scenario.

vue.js and vue router. Why does the call of `new VueRouter() ` already modify the current URL?

I have a non SPA (multi page application). On one page I use a vue.js component with multiple tabs. I control those tabs with VueRouter. it all works well very well actually.
I am using vue 2 and vue-router 3.
I define the Router directly in the single file component like this.
<script>
// import Vue from 'vue';
import VueRouter from 'vue-router';
export default {
name: 'ProductDisplay',
router: new VueRouter({
routes: [
{ name: 'offer', path: '/' },
{ name: 'posts', path: '/posts' },
{ name: 'reviews', path: '/reviews' }
],
}),
}
</script>
This tabbed component is imported globally because the entire multipage application is driven by a single app.js file compiled by webpack.
My problem is now, that even on pages, where this component is not used at all (only import ProductDisplay from product-display.vue is present), this new VueRouter({}) call affects the current URL by appending /#/ at the end.
e.g. loading my homepage https://www.example.com it ends up beeing https://www.example.com/#/
Just to clarify: this ProductDisplay component is NOT used on the homepage at all.
On the other hand, on the page where ProductDisplay is being used I expect the urls to be like this and it works well.
https://www.example.com/product#/
https://www.example.com/product#/posts
https://www.example.com/product#/reviews
Here is the entire JavaScript code (webpack + babel) loaded on the homepage if someone likes to analyze. https://pastebin.com/VAAvpfXA
Is there a way to avoid this behaviour, e.g. by explicitely activating/initiating a VueRouter object?

Vuejs Router Async Component

I am running a vue app with npm run serve.
I am injecting the components to the routes asynchronously and in my opinion is happening something strange as when I am not even at that path it shows me an error about a component of another path, saying that the file is missing... and it is true it is missing... but isn't that suppose to be injected when I am at that path? Looks like the component is already imported...
const router = new VueRouter({
routes: [
{ path: '/login', component: () => import('./pages/login.vue') },
{ path: '/register', component: () => import('./pages/register.vue') },
]
I see this error in the compiler
./src/main.js
Module not found: Error: Can't resolve './pages/register.vue' in '/home/daniel/work/someapp/frontend/src'
and the path is /login, of course all works properly when I create the register page... just don't understand why it gets imported when the route is not loaded yet.
You are right.
You won't get the error until you navigate to that route that has the erroneous import path.
However, you have specified /login for both login and register.
So if the register component import path is not correct you will get the error.
Here is a trivial implementation which demonstrates the same.
When you navigate to categories, you will see an error. But home, news and lists will work correctly.

Vue Routes does not work properly in production

I am new to vuejs. For my Vuejs application, I cannot access url like '/foo/apple' in the web hosting server, after I run the "npm run build". It shows error 404 I am using the HTML5 History Mode,(https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations) and I implemented the "connect-history-api-fallback" like below in dev-server.js:
const express = require('express')
const app = express()
app.use(require('connect-history-api-fallback')())
My router/index.js
export default new Router({
mode: 'history',
{
path: '/Product',
name: 'Product',
component: Product,
},
{
path: '/Product/kraftbag',
name: 'Kraftbag',
component: Kraftbag
},
});
my website http://americandunnage.n55lwi.info/.
I have looked for a lot of posts regarding to this problem, but I still can find the solution.
you are likely missing the hashbang (#)
try #/foo/apple instead of /foo/apple
The default setting of the vue router is to use the hashbang method. This relies on using the index.html (or whatever defaults to / url) page, because everything after it is not taken as part of the url location but passed into the application. For example, in an anchor 1st heading this will go to a part of the page, and if you're already on that page, you will not be redirected.