Develop Reference

vue3 cannot use bootstrap component

I'm in studying with Vuejs and I tried to use bootstrap/vue-boostrap component like Card or b-table but when I use them
[Vue warn]: Failed to resolve component: b-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at
then I tried to import component in javascript and this what I got:
[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install #vitejs/plugin-vue to handle .vue files.
So, I import #vitejs/plugin-vue according above, but it still got same.
App.vue
<header>toDoList</header>
<b-table striped hover :items="list"></b-table>
<input v-model="newTask">
<input v-model="newTaskDate">
<button #click="addnewTask()">add new Task</button>
</template>
<script>
import { BTable } from bootstrap-vue;
export default {
data() {
return {
list: [{name:"Doing somwthing",date:"1"}],
newTask: '',
newTaskDate: ''
}
},
methods: {
addnewTask() {
this.list.push({name:this.newTask, date:this.newTaskDate})
}
}
}
</script>
main.js
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/main.css'
createApp(App).mount('#app')

BootstrapVue is not Vue 3 compatible at the time.
You can only use BootstrapVue with Vue 3 Migration Build.
Check the Vue.js 3.x initial support and be sure your configure your setup accordingly.

Maybe it's a typo on your side, but what about this one? Note the quotes in the import statement.
import { BTable } from 'bootstrap-vue';

Vue 2.7 getCurrentInstance() trying to get properties like $vuetify

I'm trying to migrate from vuetify 2.6 to 2.7 because of composition-api but I'm getting a lot of errors when trying to get properties of the Vue instance, for example I'm using vue with Vuetify and I have a separed "helper" to try to get the $vuetify instance but everytime I'm getting undefined even when I'm trying to get the property from a setup() in the App.vue I get undefined, same thing happened when trying to get the $route property of vue-router from the instance with getCurrentInstance() then only solution I had with the router was using an internal composable of vue-router/composables to get the route.
Another thing that also happens is that the getCurrentInstance() sometimes returns null.
My main.js looks like:
import Vue from 'vue'
...
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
...
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount('#app')
./plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({
preset
...
})
App.vue
<template>...</template>
<script>
import { getCurrentInstance } from 'vue'
export default{
setup(){
console.log( getCurrentInstance().proxy, getCurrentInstance().proxy.$vuetify )
// returns: {}, undefined
// sometimes returns null, undefined
}
}
</script>
versions:
"vue": "^2.7.11"
"#vue/cli-service": "~5.0.8"
"vuetify": "^2.6.11"
Anyone knows what it could be?, Thanks.

Edited: Can't reproduce in vue v2.7.12. I tried vue v2.7.11 and can reproduce your issue. There is a severe regression in v2.7.11, please upgrade your vue.
Here is a minimal example of v2.7.12.
https://stackblitz.com/edit/vitejs-vite-fjpdck
getCurrentInstance().proxy does return a VueComponent and getCurrentInstance().proxy.$vuetify gets the vuetify instance successfully.
By the way, the recommended way to get $route instance in setup is
import { useRoute } from 'vue-router/composables' // need vue-router v3.6
export default{
setup(){
const route = useRoute()
}
}

Unable to expose a public page referenced in an email to let users reset their password in a Vue JS, Node JS and Mongo db website structure

I'm working on a Vue JS, Node and Mongodb website with user management features. I implemented a "Reset Password" functionality: a user can access his profile page, press the reset password button and this will trigger a node functionaly, which is gonna send him an email containing a URL link pointing to a Vue JS component exposed to the public called "ResetPassword".
The URL has this format: /ResetPassword/<token_assiged_to_user>
(for ex. /ResetPassword/5fa3ff9e87e0fdba7097e3bfb5e02e450ca1e1cf )
I tested the functionality locally and it works like a charm, the problem is than since I move the implementation to an actual testing server the ResetPassword page doesn't work anymore.
I marked as "public" the component in the index.js router file like this:
{
path: '/ResetPassword/:token',
name: 'ResetPassword',
component: ResetPassword,
meta: {
public: true
}
}
plus I'm using Vue-Router in my component to allow it to be exposed (here's just the beginning of the component):
<script>
import axios from "axios";
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default {
name: 'ResetPassword',
props: {
token: String
},
[...]
The ResetPassword page doesn't even seem to be rendered while clicking the link and it appears entirely blank on the screen. The error "Uncaught SyntaxError: Unexpected token '<'" is displayed referred to the manifest file and here's the error that pops-up when I look at the console in the browser:
console error
The routing configuration is set to "historymode" at the moment and I also implemented a fallback method to redirect towards our homepage.
Does anyone have an idea why this is happening? Am I missing something? I know Vue JS allows to only create some kind of "Single Page Applications", but I thought exposing a public component like I described could be feasible.
Thanks so much to everyone in advance.
UPDATE:
Here follows the main.js file requested in the comments below:
import App from './App'
import BackToTop from './components/BackToTopComponent'
import BootstrapVue from 'bootstrap-vue'
import Cookies from 'vue-cookies'
import router from './router'
import Vue from 'vue'
import VueMoment from 'vue-moment'
import VueSession from 'vue-session'
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
const moment = require('moment')
require('moment/locale/it')
Vue.use(BootstrapVue)
Vue.use(Cookies)
Vue.use(VueSession)
Vue.use(VueMoment, { moment })
Vue.filter('siNo', value => (value ? 'Si' : 'No'))
Vue.config.productionTip = false
Vue.component('BackToTop', BackToTop)
Vue.prototype.$eventBus = new Vue()
Vue.prototype.$baseUrl = '{baseUrl}';
new Vue({
el: '#app',
router,
components: { App, BackToTop },
template: '<App/>'
})

I faced the same issue in my project!
Unable to acess links (copying and pasting) whitin my Site : Node.js - Express.js - Webpack - Vue.js - historymode
The problem was related to my weback.prod.conf.js file.
Try to add this info to your "output" attribue in your webpack conf file :
publicPath: '/'
you should have something like this :
output: {
publicPath: '/'
}

How to register custom Vue components?

I promise I've read every related post I can find, but I'm getting any clear answers (as far as I can tell, but I'm new to Vue).
Details:
I'm using Vue v2.5.15
We are using webpack (I've read that this may affect how I have to use components)
I'm attempting to use this range slider component. I've tried to follow the documentation, but I keep getting an error stating [Vue warn]: Unknown custom element: <vue-slider> - did you register the component correctly?. I've tried reading the documentation and probably 20 different posts, but I'm still not getting this. Here is basically what I have in my JS file:
<!-- HTML -->
<div id="app">
<vue-slider
v-model="sliderRange"
:min="minPriceBase"
:max="maxPriceBase"
></vue-slider>
</div>
// Javascript
import Vue from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';
export default {
components: {
VueSlider
}
}
Vue.component('VueSlider', VueSlider);
var vm = new Vue({
el: '#app',
data: {},
components: {
VueSlider: window['vue-slider-component']
}
});
I've also read through the Vue docs on components and I can't figure what I'm doing wrong. How do I correctly register my component?
Update:
I've discovered that if I use:
components: {
VueSlider
}
Instead of:
components: {
VueSlider: window['vue-slider-component']
}
Then I stop getting error mentioned above. Instead I get an error stating [Vue warn]: Invalid prop: type check failed for prop "min". Expected Number, got Boolean. But think it's progress? Why would `window['vue-slider-component'] be necessary?

Looking at the docs, i think you tried to do all the different import variants at the same time
new Vue({
el: '#app',
components: {
VueSlider: window['vue-slider-component']
}
})
seems to be the suggested way of accessing the component that was appended to the window if you do a direct import via the script by adding
<script src="./node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js"></script>
(which you aren't doing)
Then there is two more ways, you can install the component globally by using
// main.js
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
Vue.component('VueSlider', VueSlider)
which would then make the vue-slider available to all the components in your application, so you don't have to import it multiple times. If you do this, you won't have to also define it locally. And finally the third option is to import it only locally:
// App.vue
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
}
}
This would make the slider component only available to a single component. In your case, you can decide to either go for option 1:
import VueSlider from 'vue-slider-component'
Vue.component('VueSlider', VueSlider);
or option 2:
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
}
}
The error you are seeing now by the way, is that your minPriceBase that you're referencing is not a Number, you would have to set that data on the instance:
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
},
data () {
return {
minPriceBase: 0,
maxPricebase: 10
}
}
}
Be aware that in your code you pasted the export before your vue instance, you don't need to export anything there, you just need to define that component on the vue instance:
import VueSlider from 'vue-slider-component'
var vm = new Vue({
el: '#app',
data: {},
components: {
VueSlider
}
});
you should be able to get rid of this in your example, it doesn't do anything:
export default {
components: {
VueSlider
}
}

Recently, there was same problem and there was also 500 server side rendering error.
Anyway, I fixed and used that by using require.
if (process.browser) { // I am not sure if it is needed for you.
const VueSlider = require('vue-slider-component');
Vue.component('VueSlider', VueSlider);
Vue.use(require('vue-slider-component/theme/default.css'));
}
...
<vue-slider ...>
...
</vue-slider>

How to import a js class in main.js file of a vue.js project and use it in all the components instead of importing in each component?

I have written some JS classes that I would like to import in the app.js/main.js file of my vue.js project so that I can instantiate them in the components. Right now I am having to import the same JS class in all the components where I need the class individually.
I've tried the import in the main.js file but the components don't recognize it.
in the main.js file, I am importing like as follows
import Permissions from './Permissions'
However, when I want to instantiate the Permissions class in my component like
data() {
permissions: new Permission({
some object properties...
})
}
the component doesn't know what Permissions is.
How do I let the component know what Permissions class is?

To do it in the vue way, you can create your own plugin or mixin. See detailed instructions here
So, you can create a permissions plugin in permissions-plugin.js
import Permissions from './Permissions'
const PermissionsPlugin = {
install(Vue, options) {
// This adds the $getPermissions method to all instances
Vue.prototype.$getPermissions = function(properties) {
return new Permission({
some object properties...
})
}
}
};
Then you have to tell vue to use your plugin:
import Vue from 'vue'
import PermissionsPlugin from './permissions-plugin.js'
import App from './App.vue'
// The plugin is loaded here.
Vue.use(PermissionsPlugin)
new Vue({
el: '#app',
render: h => h(App)
});
And lastly now from any component you should be able to use your function like:
this.$getPermissions(properties)