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.
Related
import Vue from 'vue'
import VueRouter from 'vue-router'
import Posts from './views/Posts'
//Next you need to call Vue.use(Router) to make sure that Router is added as a middleware to our Vue project.
Vue.use(VueRouter)
export default new VueRouter({
//The default mode for Vue Router is hash mode.
//It uses a URL hash to simulate a full URL so that the page won’t be reloaded when the URL changes.
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'posts',
component: Posts,
},
]
})
I am trying above code and run server then it shows this error :
ERROR Failed to compile with 1 error 3:52:40 AM
[eslint]
C:\Users\Dell\Downloads\travel-test-main\django_vue\vue2\hello\src\views\Posts.vue
1:1 error Component name "Posts" should always be multi-word vue/multi-word-component-names
It's always important to understand what an error is trying to tell you.
First, the provided code snippet does not show where the error is. The error says it's in your src\views\Posts.vue file. I believe you've given us code from your router file.
Second, the error also says that it comes from eslint which is a utility meant to enforce specific coding formatting standards. You're running into an error from an eslint rule called "vue/multi-word-component-names". Simple google search returns the rule documentation.
Anyways, to resolve this error you can either follow the rule and give the name of your component a multi-word name, or you can change your eslint config and simply turn the rule off.
.eslintrc
"rules": {
"vue/multi-word-component-names": "off"
}
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.
I have been searching to how to add a # in dynamic route in nuxtjs.
I want to achieve example.com/#username
I have tried to create a directory named '#' and inside it i created a file _user.vue but that leads to #/username
I have also tried to extend router in config and create a custom route like
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'user',
path: '/(#):username',
component: resolve(__dirname, 'pages/userProfile.vue')
})
}
},
but nuxt is preventing it & throwing error:
Expected "0" to match "#", but received "%40"
What i understand with this, is, it is url-encoding the # sign and username.
how do i achieve my desired output, (it is possible in vue router) as discussed in this below issue
https://github.com/vuejs/vue-router/issues/499
Any help will be appreciated.
Thanks!
Nvm.
I have just fixed it myself. posting answer to help others;
Nuxt doesnt support #_username.vue route name in nuxt filesystem routing.
to achieve route as example.com/#username we need to extend it in nuxt.config.js file in router object and define our custom route as
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'user',
path: '/#:username',
component: resolve(__dirname, 'pages/userProfile.vue')
})
}
},
defination of route is exactly same as vue router, as nuxt implements vue router.
so here,
name property is route name
path property is route path (prv. i was trying it (#):username which was leading to error, & it just got fixed when i removed brackets)
component property is page/component file name and it can exist anywhere, just set the file path where it exists.
Thanks me later!
cheers
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
The lazy component in vue/webpack seem to be wrong or I miss confuse about the terms.
To do lazy loading of component I use the keyword import and webpack should split this component to sepeate bundle, and when I need to load this component webpack should take care of it and load the component.
but in fact, webpack does make sperate file, but it loaded anyway when the application is running. which is unexpected.
For example I just create a simple vue application (using the cli) and browse to localhost:8080/ and the about page should be loaded (by default) using the import keyword.
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
So This is by design? I load every time the file I do not need right now (the page about). and if I have 200 pages, when I'll fetch 200 files I dont need. how that ends up? that did I save here by using the import key?
In vuetify for example they uses import key, but the files are loaded anyway and not by demand.
You can also avoid component prefetch using one of the webpack "magic" comments (https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules), eg.
components: {
MyComponent: () => import(/* webpackPrefetch: false */ './MyComponent.vue')
}
Feel free to read more about this Vue optimization below:
https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/
If you're referring to the default app template from Vue CLI, then you're actually observing the prefetch of the About page, intended to reduce load times for pages the user will likely visit.
If you want to avoid this performance optimization, use this Vue config:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch')
config.plugins.delete('preload')
}
}
For troubleshooting reference, Chrome's Network panel includes an Initiator column, which provides a clickable link to the source file that triggered the network call. In this case of the about.js, the source file looks like this:
try using vue-lazyload maybe it can help and for <script> tags you can try async defer it helps in website speed optimizations