I used vue create to create a new view project with Babel, TypeScript, Router and Unit Testing. I then installed axios using npm.
Having done no other changes, I served the application by navigating to the src directory and running vue serve.
The resulting boilerplate application fails to load with the following error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
found in
---> at App.vue
My own research shows that this error usually happens when you fail to call Vue.Use(). However, my router.ts file does so:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({ 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'),
}, ], });
Does anyone know what is wrong here? Given I haven't changed anything, could it be a config issue?
I got it!
The issue was that I was running the server the wrong way. I was using:
vue serve src/App.vue
when I should have used:
npm run serve
After that change, it started to work.
You don't need to navigate to the src folder, just navigate to the root directory of your application, then run npm run serve.
Related
My VueJS application is using a router and has a LoadingPage.vue component which is being used in the router as follows:
{
path: "/loading",
name: "loading",
component: () =>
import(
/* webpackChunkName: "loading" */
/* webpackPrefetch: false */
/* webpackMode: "lazy" */
"../views/LoadingPage.vue"
),
}
Upon visiting the /loading route, the component is being shown successfuly. However, I'm not seeing a separate chunk when I inspect the files request by the browser.
Here's a screenshot of the .js files that are being loaded:
I expected a loading.[hash].js file there, but it's missing.
What could be causing this problem? I'm using vue 2.6.14 and vue-router 3.5.1
I also haven't touched the vue.config.js file, it looks like this:
module.exports = {
configureWebpack: {
devtool: "source-map",
},
devServer: {
host: "localhost",
},
};
I encountered the same problem as well. I solved it but deleting extra import statement at the top of the file. Try to make sure you are not importing the same component twice.
My route : Route in index.js
Import statement in index.js: Import statement in index.js
Once i deleted all the duplicate component (Account etc) and run build, a separate chunk created : Admin chunk
Hope it can solve your problem as well.
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'm working on a vuejs project and we're trying to use external vue cli applications as libraries. In these libraries we want to be able to export a router config, which lazy loads the components within one of these modules. However when we compile this using the vue-cli-service into a library and it's got lazy chunk assets we cannot resolve them with webpack.
I have a feeling its something to do with the public path, or some simple configuration but i'm just stuck and banging my head against a wall at this stage with it.
https://github.com/EvanBurbidge/mono-repo-tester
Here's a simple overview of what we're doing
App1 -> main app, installs App2, imports { router } from 'app2'
App2 -> library, compiles to common js lib exports router config
The console output from app1
The router configuration from app2
The router importing app2 from app1
/* config.module.rule('js') */
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/evan/test/node_modules/.cache/babel-loader',
cacheIdentifier: '39e7e586'
}
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
},
I think I know what the problem is.
It appears that you're suffering from the fact that the default config of webpack bundled with VueJS does not support what you are trying to accomplish. In fact, it may very well be that Webpack does not support what you are trying to accomplish #2471 #6818 #7843.
When you compile app2 into UMD and try to use it within app1 by importing the UMD, the dynamic imports of app2 are not being resolved and are thus not copied over to the publicPath of app1. Since it is a dynamic import, compilation succeeds to the point where you can deploy the app. When you try to load the app however, it starts complaining that chunks are missing.
Here's one way to solve this problem:
app2/package.json
{
"name": "app2",
...
"main": "src/router.js"
}
app2/src/router.js
const Hey = () => import(/*webpackChunkName: 'app2.Hello.vue' */ './components/HelloWorld.vue')
export default [
{
path: '/app2',
component: Hey,
name: 'app2.hey'
}
]
app1/router.js
import app2Router from 'app2'
import Home from './views/Home.vue'
export default new Router([
mode: 'history',
...
routes: [
{
path: '/',
name: 'home',
component: Home
},
...app2Router
]
])
By marking the main or module of app2/package.json as router.js instead of the the UMD bundle, you are forcing app1 to build the whole dependency graph and include any dynamic import that is detected. This in turn causes the dependencies to be copied over properly.
You could also achieve the exact same results by using
import app2Router from 'app2/src/router'
Supposedly, this issue is now fixed in Webpack 5 https://github.com/webpack/webpack/issues/11127
I am just getting started with Vue. I installed #Vue/Cli (that's version 3) and also cli-init so I can use version 2's commands. To create my project I used vue init webpack .
While running the app on the browser I noticed strange behaviour;
my routes are being changed!
Initial Route "localhost:8080/"
Navigating to the route url changes to "localhost:8080/#/"
Also with another route "localhost:8080/about"
Navigating to this route the url changes to "localhost:8080/about#/"
I don't understand what is going on. It renders the components though, but the url just changes.
Here is my routes config:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/about',
name: 'AboutComponent',
component: AboutComponent,
},
{
path: '*',
name: '404',
component: HelloWorld,
},
],
});
No router links, I navigated by typing the paths.
My router setting is default.
You can probably answer the question yourself by reading vue-router documentation here (https://router.vuejs.org/guide/essentials/history-mode.html)
By default vue-router works in hash mode. Routes are changed in the browser with a 'hash' for compatibility with old browsers. Nowadays you can safely use history mode, and your URLs won't change in the browser location box.
However, I recommend that you read and fully understand how client-side routing works and what's the required server-side configuration you need to make your app work properly.
Welcome to Vue.JS!
// Edit: I think i have the problem solved. i needed the standalone build from vue...
i have migrated my vue.js 1.0 app to vue.js 2.0 (with migration helper). But this error shows me in the console Failed to mount component: template or render function not defined. (found in root instance).
Here is my simplified main.js:
import Vue from 'vue';
import Router from 'vue-router';
import SiteHeader from './components/Header.vue';
import Content from './components/Content/Content.vue';
import SiteFooter from './components/Footer.vue';
Vue.use(Router);
const router = new Router({
mode: 'history',
root: '/',
routes: [
{ path: '/', component: Content }
]
});
new Vue({
router,
components: {
SiteHeader, SiteFooter
}
}).$mount('body');
The Content.vue is an normal vue file with template and script (nothing special here).
My ´router-view` is defined in an laravel.blade file
#if(Request::is('login'))
<login></login>
#else
<site-header></site-header>
<router-view></router-view>
<site-footer></site-footer>
#endif
For starters, you are not allowed to mount to the body element in Vue 2.0.
Also, as the error message states, you have not provided a template or render function.
I assume (as you did not show) you have template markup directly in the HTML page.
This can work, but only with the "standalone" version of Vue. However, the default export of Vue's npm package is the "runtime build", which can't parse such templade code.
Further information here:
https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build