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.
Related
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.
What would be the steps to add a component to Vite with Vue, as an npm package?
I assumed these:
npm install example
open src/App.vue and add import Example from 'example'
in App.vue, in <template>, add <Example />
Is that correct?
I am trying to install and use vue-select like so, but it's not working:
The process you described is correct, but you must also register the component before you can use it (within components: { ... }).
Since you mentioned you're using vue-select, I will use that as an example.
Step #0 - Install
As you've already done, ensure your project is initialized (npm init), then run yarn add vue-select / npm i vue-select.
Step #1 - Initialize
In your main.js, import and register with:
import VSelect from 'vue-select';
Vue.component('v-select', VSelect);
/* rest of your Vue initialization here */
Step #2 - Use Component
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
You'll also need to import the stylesheet in your CSS, with:
#import 'vue-select/src/scss/vue-select.scss';
Real Example
If you want to see a full example, I am using this package in one of my projects, I'm registering the component in my main.js and using it ThemeSelector.vue.
Also, if your project is large and/ or you're only using this component in one place, then a better approach would be to import it into the component that's using it. This is done in a similar way, but you must also register it under components: { ... } for it to be accessible within your <template>.
Your screenshot shows you're importing vSelect in a <script> block, and expecting it to be automatically registered for the component's template. That would only work in a <script setup> block.
However, your GitHub repo (which seems to be different from the screenshot you posted) reveals other issues in your code:
You're using Vue 2 code to globally register the v-select component in your Vue 3 app. In Vue 3, global component registration is done from the application instance (i.e., returned from createApp()).
// main.js
import VSelect from 'vue-select';
// Vue.component('v-select', VSelect); ❌ Vue 2 code
import { createApp } from 'vue'
import App from './App.vue'
createApp(App)
.component('v-select', VSelect) ✅
.mount('#app')
You're using #import (CSS syntax) to import your SCSS file in the <script> block. Either move the CSS into a <style lang="scss"> block; or remove the # prefix, which would create a valid import for <script>.
<script setup>
// #import 'vue-select/src/scss/vue-select.scss'; ❌ The # prefix is invalid in <script>
import 'vue-select/src/scss/vue-select.scss'; ✅
</script>
<!-- OR -->
<style lang="scss">
#import 'vue-select/src/scss/vue-select.scss';
</style>
Your project is missing sass, which is required to process SCSS files. You can install it as a dev dependency with:
$ npm i -D sass
Here's a demo with the fixes pointed out above.
When building a Vue library (component), according to Vue docs, you can set css.extract: false in vue.config.js to avoid the users having to import the CSS manually when they import the library into an app:
vue.config.js
module.exports = {
css: {
extract: false
}
}
However, when you do that, the icons are not displayed in the production build.
In this case I'm using #mdi/font and weather-icons. Neither of them load:
To reproduce
You can reproduce this with this Vue library (component):
Create new Vue project with vue create test
Clone the repo and put in the same directory as the Vue test project
In vue-open-weather-widget set css.extract: false in vue.config.js;
And comment out CSS import:
import 'vue-open-weather-widget/dist/vue-open-weather-widget.css'
Build vue-open-weather-widget with yarn build
Import it into the test Vue app with yarn add "../vue-open-weather-widget";
Serve the test app yarn serve
I have looked at your lib (nice component BTW). I created a build with css: { extract: false } and first looked at the behavior when importing vue-open-weather-widget.umd.js directly into an HTML file. And that worked without any problems.
The thing is that the fonts remain external in the dist after the build. And it seems that there is a problem to find the fonts when your component is loaded in a Webpack project (in our case Vue CLI project). I don't know why the fonts are not referenced correctly. But I have found another, and possibly a better solution.
As it is stated in the MDI docs, the use of the web fonts can negatively affect the page performance. When importing only one icon, all of them are imported, which in turn increases the bundle size. In such a small component this is more than suboptimal, especially for the component users. Therefore here is the alternative solution, also suggested by MDI:
Use #mdi/js instead of #mdi/font
Remove all #mdi/font references in your code and install deps:
npm install #mdi/js #jamescoyle/vue-icon
Replace all icons with SVG(e.g. in MainView.vue). Note that on this way only icons are included in the bundle that are used in your components:
...
<span #click="state.settings.view = 'settings'">
<svg-icon type="mdi" :path="mdiCogOutline"></svg-icon>
</span>
...
import SvgIcon from '#jamescoyle/vue-icon'
import { mdiCogOutline } from '#mdi/js'
...
components: {
SvgIcon
},
data () {
return {
mdiCogOutline: mdiCogOutline
}
},
Adjust vue.config.js:
module.exports = {
css: {
extract: false
}
}
Build component:
# i would also include --formats umd-min
vue-cli-service build --target lib --formats umd-min --name vue-open-weather-widget src/main.js
Now your dist contains only 192.68 KiB vue-open-weather-widget.umd.min.js and the component is ready to use over CDN or in a Vue CLI Project, without importing any CSS or fonts. I have tested both cases. Here is how it looks like:
Hope it helps you! Feel free to ask if you have further questions.
I am building a standalone Vue component and using it in another Vue project.
Build component:
vue build --target wc --inline-vue --name user-menu user-menu.vue
It's a simple component so far without functionality, just markup.
Then, in the main project in package.json:
"devDependencies": {
"user-menu": "git+https://........user-menu.git",
Then, in the main.js:
import Vue from "vue";
import UserMenu from "user-menu"
....
Vue.use(UserMenu);
const app = new Vue(config).$mount("#root");
window.app = app;
Vue.use(UserMenu);
And it says:
user-menu.js?e2ea:1446 Uncaught ReferenceError: Vue is not defined
on a row
module.exports = Vue;
But the Vue CLI 3 documentation says that:
In web component mode, Vue is externalized. This means the bundle will
not bundle Vue even if your code imports Vue. The bundle will assume
Vue is available on the host page as a global variable.
Any idea how to fix that?
Finally I came to the following solution: the component should not be built at all. Source files are enought to be imported like this:
import UserMenu from "user-menu/user-menu";
Pay attention that the path should point at the imported vue file, not just to the folder. But the extension "vue" must be skipped.
The final application will build it all together.
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' }
]
//...
}