I installed vuetify using the command vue add vuetify, but an error as below occurred because I didn't create the project using vue create <project>, instead, I used vue init <template> <project>.
Then, my project cannot run anymore. When I issued npm start, tons of errors occurred. The screenshot below is one of them:
Could someone teach me how to recover from these errors? Can I remove this plugin?
Or did it just destroy my project and I have to create a new one and start from scratch again?
Thanks
You can try
npm uninstall vue-cli-plugin-vuetify
removes veutify as a dependency
Cross verify in `package.json' file
Related
I have a fresh project which I created using the vue command line tool. vue create . But when I type npm serve, the component import is highlighted as red. This is a fresh creation of the project, I haven't changed anything.
Cannot find module '#/components/HelloWorld.vue' or its corresponding type declarations.Vetur(2307).
The error message indicates you're using Vetur, which is likely the cause of the problem.
From Vue docs:
ℹ️ TIP
Volar replaces Vetur, our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
This also applies to Vue 2 projects. Disabling Vetur and enabling Volar should resolve the issue.
If you using Vue 3 , it's better to use Volar extenstion.
I was running ionic serve in local computer and got following error
compilation error
It was working fine earlier, also I didn't make any changes to code whatsoever. I don't understand what is causing this error.
I tried following
Freshly clone project from git repo
Re-install npm dependencies
Un-install and re-install ionic globally
None of the above methods worked.
Looking at the error log, which say:
You may need an appropriate loader to handle this file type.
You need to add vue-loader to your webpack configuration. You can find an example of such an integration here:
https://github.com/vuejs-templates/webpack-simple
Someone said here "You may need an appropiate loader to handle this file type" webpack and vue that he solved the problem by downgrading vue-loader using:
npm install vue-loader#14 --save-dev.
Apparently v15 has some issues.
I suggest you to look in this posts:
Error: "You may need an additional loader to handle the result of these loaders."
"You may need an appropiate loader to handle this file type" webpack and vue
Vue Render HTML - You may need an additional loader to handle the result of these loaders
Vue - You may need an additional loader to handle the result of these loaders
Solved this bug,
One of the components contained lang typescript where as ionic system is using javascript.
SignIn Component:
<script lang="ts">
//logic
</script>
I just removed lang and ionic compiled files properly.
Earlier versions didn't track this error.I recently upgraded ionic version to 6.17.1.
I am using a third party component (vue-image-lightbox) which currently has a bug. I cloned the repo and made the change and want to deploy it with my app to see if it fixes the issue. To do this I installed yalc.
In the component project (vue-image-lightbox) I ran
npm run build
yalc publish
My understanding is that this places my vue-image-lightbox into the yalc store.
Next, I went to my dependent project and ran
npm uninstall vue-image-lightbox (remove the existing component)
yalc add vue-image-lightbox. This creates
a) .yalc directory with the deployed component
b) adds entry to package.json : "vue-image-lightbox": "file:.yalc/vue-image-lightbox",
run npm install to pick up any dependencies
After this I ran my app and went to the component that uses vue-image-lightbox. In the console I not get the warning
"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
All of the registration code works without issue with the git installed component. I don't understand why I see this when I try to use yalc.
The component is registered locally with
import LightBox from 'vue-image-lightbox'
components: { LightBox }
I would love to know what is different about the yalc installed component that is causing this issue. Is there a better way to test out patches on third party components other than yalc?
Thanks!
So this is the error i get when i open my vue project... except that i cant even locate my manifest.json nore do i have a /img/icons folder in the project. I cannot figure out what the error is or how to correct it
Error while trying to use the following icon from the Manifest: http://localhost:8080/img/icons/android->chrome-192x192.png (Download error or resource isn't a valid image)
The error you're seeing is typically caused by altering a project created using Vue Cli 3's command vue create some-project and then removing either parts of or in its entirety the public folder. Namely, the error complains about the absence of icon files situated in public/img/icons, aimed at providing android, apple or web icons/favicons for the served/built app.
A possible fix for this error is to create a new project (run vue create whatever outside of your project) and copy-paste the resulting public/ folder into your current project.
If you haven't created your project with Vue Cli 3, the solution above will likely not work.
For Vue Cli 2.x projects, according to Vue Cli docs running vue init webpack my-project in the root of the project (where my-project is the name of your project as set in package.json) might work.
I have vuejs installed and would like to use vue admin (https://github.com/vue-bulma/vue-admin) with it, however the documentation does not mention how to use it.
For example, if I wanted to use a component from vue-admin then what are the steps?
You'll need to git clone the vue-admin project repository:
git clone https://github.com/vue-bulma/vue-admin.git my-vue-admin
Then:
cd my-vue-admin
Next, install all the dependencies:
npm install
Once all the dependencies are installed, run:
npm run dev
Wait for the compilation to finish then go to http://localhost:8080 in your browser and it should be working.
Using individual components only
If you would like to use some components only, for example: a modal component. Then find its npm package name and install it in your project.
You can either look for the name in package.json or look at the source code of the page using that component in vue-admin. For example, a modal is used here.
Vue-admin is using vue-bulma-modal component. Here is its page which can provide you with more information.
vue-admin is more of a project template, so you'd make a copy of the whole project and make changes as needed. If you want to use individual components, just install them as needed and refer to vue-admin as example