I have a project in Nuxt.js and I am trying to test it using Vue Test Util which works effectively except on files where I use BootstrapVue custom html elements.
When I run npm test this error displays for every BootsrapVue html element.
console.error
[Vue warn]: Unknown custom element: <b-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Anonymous>
<Root>
How can I prevent this?
You need to setup bootstrap-vue in your Jest enviroment, using a Jest setup file.
Create the setup file:
// #/jest-setup.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Then configure Jest's setupFiles to load it:
// #/jest.config.js
module.exports = {
setupFiles: ['./jest-setup.js'],
}
Related
I am a React JS Developer learning Nuxt JS - But I am failing to understand the way NPM libreries are imported and used in Nuxt 3 as plugins.
Console:
Failed to resolve import "C:/Users/Eigenaar/Desktop/nuxt-
course/first/plugins/v-tooltip.js" from
"virtual:nuxt:C\.....first\.nuxt\plugins\client.mjs"
plugins/test.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'#nuxtjs/tailwindcss'
],
plugins: ['~/plugins/v-tooltip.js'],
})
app.vue
<h2 v-tooltip="Show tooltip">Hover me!!</h2>
I have been following the official documentation but still getting error messages when trying to use third party NPM packages in general, is anybody having the same issue?
I am using the Vue CLI Plugin Electron Builder and whenever I try to include electron ipcRenderer inside of my Vue component using
import ipcRenderer from 'electron'
I get this error
Module not found: Error: Can't resolve 'path' in '/Users/myname/IdeaProjects/project/node_modules/electron'
How would i fix this?
I eventually solved this by adding this to my vue.config.js
electronBuilder: {
preload: 'src/preload.js'
}
Then in my browser window I could load a preloader like normal.
Next in my preload i added this
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer
Now I can use window.ipcRenderer in the renderer!
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.
global.js
import Vue from 'vue'
// javascript import for when you're importing the css directly in your javascript
import "vue-navigation-bar/dist/vue-navigation-bar.css";
// import the library
import VueNavigationBar from "vue-navigation-bar";
Vue.component("vue-navigation-bar", VueNavigationBar);
nuxt.config.js
plugins: [
{ src: '~/plugins/global.js', ssr: false }
],
Error
window is not defined
I have tried all the possible solutions in nuxtjs documentation still getting same error.
Thanks!
The solution is to wrap it in <client-only>
<template>
<client-only>
<vue-navigation-bar :options="navbarOptions" />
</client-only>
</template>
I'm trying to integrate a Datatable plugin (https://www.npmjs.com/package/vuejs-datatable) in my Vue application and I'm getting an error in my console.
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (vuejs-datatable.js?b015:1)
at Object.eval (vuejs-datatable.js?b015:1)
at eval (vuejs-datatable.js:4)
at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (app.js:10170)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/views/tables/data-table.vue:2)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tables/data-table.vue (app.js:1438)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
My dataTable.vue file:
<template lang="html">
<section class="data-table">
<datatable :columns="columns" :data="rows"></datatable>
</section>
</template>
<script lang="js">
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'
export default {
name: 'DatatablePage'
}
Vue.use(DatatableFactory)
</script>
And whenever i try to use 'Vue.use(PluginName)' when integrating a plugin, i get the similar error. I'm new to VueJS. Is there anything i need to do ?
You need to add plugin before your main Vue instance is initialized; See using vue plugins here, which says:
Use plugins by calling the Vue.use() global method. This has to be
done before you start your app by calling new Vue().
For your case, move
import Vue from 'vue'
Vue.use(DatatableFactory)
to your main.js, so it looks like:
import Vue from 'vue'
Vue.use(DatatableFactory)
// some other code
new Vue({
...
})
Adding the following in weback.config.js seemed to do the trick:
module.exports = {
resolve: {
alias: {
...
'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
...
}
},
}
Based on discussion here:
https://github.com/pstephan1187/vue-datatable/issues/50
I faced the same error in my vue-app.
import Vue from 'vue';
import VueRouter from 'vue-router';
...some more imports here....
Vue.use(VueRouter);
...
The error was cannot read property 'use' of undefined. Which means, it had a problem with reading Vue. I checked my package.json and package-lock.json (for whether I installed in my local). Everything seemed ok. I had both Vue and Vue-router.
Deleting node_modules and re-installing worked for me.