I created a component and used it in my nuxt app. When my app is runned I've delete it and nuxt return me error message:
How I can solve error with removed component in my case?
It looks like you have a file "test.vue" in the pages directory. Ie. /pages/test.vue
It would appear that page is trying to load your deleted component. I guess it has an:
import Unauth from "#/component/Unauth"
Delete that line and "Unauth" from the components section.
Related
I'm using the vue-google-charts package (https://www.npmjs.com/package/vue-google-charts) to display google charts in my application (vuejs2.x) and until now it worked perfectly fine.
But now i get the following error:
Uncaught (in promise) TypeError: n.load is not a function
at vue-google-charts.common.js:1
at new Promise (<anonymous>)
at vue-google-charts.common.js:1
and in my code the following messages shows up:
I read in several articles that i can create a file vendor.d.ts and put the following inside:
declare module 'vue-google-charts';
I created this file and placed it in the "src" folder but it still doesn't work. The problem is, that when I test it locally the application works perfect, all graphs are displayed etc. but as soon as I deploy the application to firebase the graphs don't work anymore.
I also read that the problem can be solved by put the following setting in the tsconfig.json file:
"noImplicitAny": false
But I don't have a tsconfig.json file I only have package.json and vue.config.js. so don't know where to put this setting.
Thanks for your help
I couldn't find any answer to this problem but I figured out that this problem only exists in the index.vue page. If I use another page the problem vanishes.
So i created a second page with the graph inside and redirected the index-site to the second page with the graphs.
I know it doesn't answer the problem but it is a workaround I can live with.
I have an express server serving only one GET route and return the file 'public/app.html'
This app.html file load vue.js throw cdn
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
I don't want to have a big component!
How can I put every component in a different file?
What I tried:
I created a /public/components/InputName.vue vuejs component.
And inside public/app.html in <script> I added:
import InputName from './InputName'
But I have this error
import declarations may only appear at top level of a module
Check this GitHub Repo :
it explains how you can load a component from a server:
https://github.com/maoberlehner/distributed-vue-applications-loading-components-via-http
I'm trying to incorporate the Ripple package into my Nuxt application.
Following Nuxt docs and the package docs example I have a ripple.js file in plugins/ directory containing this:
import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)
Then in nuxt.config.js I have:
plugins: [
'~/plugins/ripple.js'
],
But now the app doesn't work at all, with some Unexpected token export error message on the screen, and a "Missing stack frames" error message in vm.js.
I have no idea what that means nor what I'm doing wrong, any suggestion?
This is due to an SSR error, where vue-ripple-directive cannot be used on the server. In order to get around this, you need to instruct Nuxt to only load the plugin on the client side.
To fix this, do the following 2 things:
First, rename ripple.js to ripple.client.js.
Second, update the plugins array to the following:
plugins: [
'~/plugins/ripple.client.js'
]
The .client postfix signals to nuxt to only run the plugin on the client.
More information can be found here
Always keep this method in mind when adding Vue plugins, especially when they interact with the DOM in some way. Most that I've come across require this method to function without errors, as the DOM is unavailable on the server.
I'm using service worker and caching with workbox using webpack for a vuejs app. While it worked fine until now, when I pushed new changes to our app, the app breaks after reloading the page and gives this error. Also, in the network tab, I see that it is requesting a non-existing app.js build file which was a previous deploy file. How do I solve this?
If you observe the image, you can see that the request is going to older app.js file while in the dist folder to the left, the hash of app.js bundled is different.
error image
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.