We Keep Coding

Importing BootstrapVue 3

Here You can find the code with image
import { createApp } from "vue";
import App from "./App.vue";
import BootstrapVue3 from "bootstrap-vue-3"
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
const app = createApp(App);
app.use(BootstrapVue3);
app.mount("#app");
It Causes an error in a given line of code as following
app.use(BootstrapVue3);
Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2'.
Type '((app: App<any>, ...options: any[]) => any) & { install?: ((app: App<any>, ...options: any[]) => any) | undefined; }' is not assignable to type 'Plugin_2'.

This package is deprecated and the repo was moved to bootstrap-vue organization. https://www.npmjs.com/package/bootstrap-vue-3
Here is the installation process of bootstrap-vue
# with npm
npm install vue bootstrap bootstrap-vue
# with yarn
npm install vue bootstrap bootstrap-vue
Then, register BootstrapVue in your app entry point (typically app.js or main.js)
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
You can also follow the bellow link. https://bootstrap-vue.org/docs#using-module-bundlers

How do I fix "the requested module does not provide an export named 'default'"?

I'm developing app using JS and Vue.js and get error on line:
import Vue from 'vue'
I'm getting this:
Uncaught SyntaxError: The requested module
'/node_modules/.vite/vue.js?v=6dba2ea6' does not provide an export
named 'default'
I googled that might be caused by old Vue version, in my package.json vue version is 3.2.6, but
npm view vue version
returns 2.6.14, I tried to upgrade it with Vue CLI
vue upgrade
but npm command still return 2.6.14
I hope you could help me, what did I wrong or it is not even versions problem? Thanks!

The reason it didn't work is that Vue provides a named export, whereas you are trying to import it as though it had a default export.
To make a named import (which you must do with named exports), you need to wrap the name of the export you want to import in curly braces, so {} around Vue like this:
import { Vue } from 'vue';
// ^^^ name of export
It will work
The thing you want to do is import vue but it doesnot have a default export function or either the default thing to export is not set in vue module. So you have to select function named vue by adding curly braces.
If it had a default export function, then your code would have worked and in that case you could write anything in place of vue like below:
import anyname from 'vue'
anyname is name whatever you want.

This worked for me:-
import * as Vue from 'vue';
and similarly for different packages:-
import * as Vuex from 'vuex';
import * as VueRouter from 'vue-router';
As of time of writing:-
"devDependencies": {
...
"vue": "^3.2.45",

Another solution is to use the createApp() function like this:
import { createApp } from 'vue';
createApp(App).mount('#app')
I'm not experienced in Vue JS, but it looks like they no longer export a single object. Ranger a collection of things.

Usually as of Vue 2, in the src/main.js file, we’re bootstrapping the app by calling a new Vue as a constructor for creating an application instance.
import Vue from "vue";
import App from "./App.vue";
import router from './router'
const app = new Vue({
router,
render: h => h(App)
});
For Vue 3 the initialization code syntax has changed and is much cleaner and compact
import { createApp } from "vue";
createApp(App).use(store).mount('#app')

"Property $notify does not exist on type" - Can't use npm package on Vue App

I am using this npm package to send notifications in my Vue App. After following the instructions, and adding the required usages on the main.ts, I keep getting when I try to use the features of it:
Property '$notify' does not exist on type 'Shop'
main.ts:
import Vue from 'vue'
import Notifications from 'vue-notification'
import App from './App.vue'
Vue.use(Notifications)
new Vue({
render: h => h(App)
}).$mount('#app')
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Character from "./Character.vue";
import Vendor from "./Vendor.vue";
#Component<Shop>({
components: {
Character,
Vendor
},
})
export default class Shop extends Vue {
sellItem(itemID) {
this.$notify({
title: 'Important message',
text: 'Hello user!'
});
}
}
</script>
I have tried importing the component in the .vue file, however it does not recognize the type. What am I doing wrong? I can't find any solution for this...
Thank you.

Add a shim typings file
You need a file that imports and re-exports the type of "Vue", it is named vue-file-import.d.ts, but elsewhere on the internet it is commonly called vue-shim.d.ts. Regardless of name, the content needed is the same:
// vue-file-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Try placing the above file in /src location. But sometimes when you move around changing things it might not work so I suggest you to place it inside /typings location

vue 3 import vue-tables-3 but i got error: "_vue.default is not a constructor"

I'm trying to use Vue Tables 3 library with Vue 3. Here is my code in main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { ClientTable } from 'vue-tables-3'
const app = createApp(App)
app.use(ClientTable)
app.use(store)
app.use(router)
app.mount('#app')
When trying this, I get the following error in browser terminal:
"_vue.default is not a constructor"
I have tried every possible ways how import some plugin but all attempts were unsuccessful.
Does anyone know how to fix please?

This component is not compatible with vue 3 although its name indicates that is compatible which is something that confused you, they say :
... We have decided to maintain as a new project. We name it vue-tables-3 because there will also be the version for Vue.js 3 when it is ready.
but the last publish is more than one year.
But you could use vue-tables-2 which is compatible with vue 3

Vue + Typescript - Import errors with class based decorators

I'm trying to set up Vue 3 with TypeScript and class-based components. However, I keep getting on error on importing the Component decorator the Vue constructor:
This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)
mycode.vue:
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
#Component // 1st Error '#Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
}
</script>

You might be trying to use the example from the official vue-class-component docs, but that's currently for the 7x version, which can only be used with Vue 2.
Vue 3 requires vue-class-component 8x, which is not yet documented, but you can refer to vue-class-component Issue #406 that describes the changes. The notices relevant to your question:
#Component will be renamed to #Options.
#Options is optional if you don't declare any options with it.
Vue constructor is provided from vue-class-component package.
Since your component has no options, you could just omit the #Options decorator from your component:
// BEFORE:
import Component from 'vue-class-component'
#Component
class {}
// AFTER:
/* no options used, so no #Options decorator needed */
class {}
Also, Vue 3 no longer exports the Vue constructor, but vue-class-component does, so your component would have to extend that instead:
// BEFORE:
import Vue from 'vue'
// AFTER:
import { Vue } from 'vue-class-component'
For reference, you can use Vue CLI to generate a Vue 3 + TypeScript project to play with a working example that uses the latest vue-class-component as described above.

With a decorator, you don't need ({}).
Try
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
#Component // 1st Error '#Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
}
</script>

Based on this issue and this one you could do :
<script lang="ts">
import {vue} from 'vue-class-component'
export default class ProdItem extends Vue {
}
</script>