I am using VUE 3 and vite for my project. I have installed vite-svg-loader and imported and included the svg file as below.
import ProgressPin1 from '../assets/svg/google.svg?components';
export default {
components: {
ProgressPin1
}
}
Afterwards, I tried using the SVG inside my file as below:
<template>
<ProgressPin1/>
</template>
However, I am still getting the following error in my console.
Failed to resolve component: ProgressPin1
If this is a native custom element, make sure to exclude it from component resolution via
Do advise! Thank you.
Related
I am trying to import a module that was created by me like this:
import { Modal } from '#rave/commons';
Everything works fine on the development side, but when trying to run some jest test I have the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
If I change #rave/commons to the full path ../node_modules/#rave/commons/..etc the error is gone.
Is there a way to specify some configuration in order for jest to understand the #rave/commons import?
I'm trying to add Vue.Draggable to my app. The documentation provides a direct link to the javascript files which I import, but I get the error:
The requested module 'vuedraggable' does not provide an export named 'default'
(the listed source returns a 404, but using unpkg I can get the right file from a different source)
Which I recognize as well... not specifying a default. Which implies I need to import a named package. But I can't for the life of me figure out how to get it to work with VueDraggable.
Here's how I import vue & vuedraggable:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js",
"vuedraggable": "https://unpkg.com/vuedraggable#4.1.0/dist/vuedraggable.umd.min.js"
}
}
</script>
how I import vuedraggable to the app;
import draggable from "vuedraggable";
and hook it to vue;
components: {
draggable
},
This question is very similar, but I don't understand how to do it without build tools.
What am I missing?
I'm building a Nuxt app with Vuetify buildModule setup and want to make a number of v-cols sortable via VueDraggable (in my case, I built and added a super small Nuxt plugin which binds a global draggable component from the default export from VueDraggable). The v-cols should be wrapped with a v-row, so I'm using the draggable component with tag="v-row". This works well when running the dev server (nuxt-ts in my case since I'm using Nuxt with typescript support), but fails when building and running in production mode.
To illustrate the issue, here is some info on what's happening. My source is as follows (i.e. I use Pug):
In development mode, my v-row is rendered correctly in the DOM from Vuetify:
But when building and running in production mode, the draggable component literally renders v-row as the DOM tag instead of it going through rendering/parsing via Vuetify:
Does anyone have any idea on how to identify the root cause and how to resolve it here? I can likely hack my way around this problem for now, but want to know if this is a Nuxt bug or if anyone has solved this in any other way.
Just came across this issue, it turns out you need to register the VRow component globally:
import { VRow } from 'vuetify/lib';
Vue.component("v-row", VRow)
in your main.js
If the problem is caused by the vueDraggble registration try following:
Create <project-root>/plugins/draggable.ts
import draggable from 'vuedraggable';
import Vue from 'vue';
Vue.component('draggable', Draggable);
And remove
import draggable from 'vuedraggable'
from your .vue files.
and in your nuxt.config.js add
export default {
// ...
plugins: [
{ src: '~/plugins/draggable.ts', mode: 'client' }
]
//...
}
I started creating a project in vue.js based on this one:
https://github.com/creativetimofficial/vuetify-material-dashboard
When trying to integrate TableList.vue component, I get an error:
Unknown custom element: <material-card> - did you register the component correctly?
Vue.js project was created using webstorm. I copied over styles folder and enabled watcher to compile scss files into css. I run project using npm serve command in WebStorm.
My App.vue looks a little different like this:
<template>
<v-app>
<TheBar />
<TheNavigationDrawer />
<TheView />
</v-app>
</template>
<script>
import TheBar from '#/components/core/TheBar.vue'
import TheNavigationDrawer from "#/components/core/TheNavigationDrawer";
import TheView from '#/components/core/TheView.vue'
export default {
name: 'app',
components: {
TheBar,
TheNavigationDrawer,
TheView
},
data: () => ({
}),
};
</script>
<style lang="scss">
#import './styles/index.scss';
</style>
As you can see I am importing the full file, which in turn imports _cards.scss file which should have definition of material-card component. Is this how it works?
I tried registering component manually by adding material-card to components property but it fails to parse kebab-case properly because of '-' sign.
What also intrigues me is that the original creator NEVER registers material-card component so how the hell does his TableList.vue component know it?
I also found this guide - https://medium.com/#mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9. However I don't see a webpack.config.js file anywhere, where is this?
Any help is greatly appreciated. :D
There are multiple ways of importing components into your Vue instance. For the case of the project you're working from, the vuetify library is imported at the root instance which allows all components to be available globally. This means you don't need to import the desired components within specific .vue files.
It's likely that you haven't installed all of the dependencies correctly. Or you have not properly imported these dependencies within main.js. Check that these dependecies (found in package.json) have been installed by running npm list.
tried to use the bootstrap-vue for the first time but got issue upon compiling assets. When I run npm run watch, I got an error something like below.
Module parse failed: C:\projects\portfolio\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
| noop() {
| // Do nothing event handler (used in visible watch)
# ./node_modules/bootstrap-vue/lib/mixins/index.js 2:0-38
app.js
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
Vue.component('b-navbar', require('./components/Navbar.vue'));
Navbar.vue
<template>
<div>
<!-- navbar contents here.. -->
</div>
</template>
<script>
import { bNavbar } from 'bootstrap-vue/lib/components'
export default {
components: { bNavbar }
}
</script>
Expected result
Must display the navbar component
It seems, that you try to use single BV component. In that case you need to setup your dev enviroment to be able to compile BV sources by installing babel plugin https://babeljs.io/docs/plugins/transform-object-rest-spread/ and configuring babel to include node_modules/bootstrap-vue/lib folder