We Keep Coding

Determine if a component is loaded Vue 3 and load a Generic component if not

I am migrating a project from Vue 2 to Vue 3. I need to determine if a component is loaded and if it isn't, load a GenericComponent as a placeholder. In Vue 2 I was able to do it with the sample code. I have been reading the Vue 3 docs but I am unable to find anything about this.
import Vue from 'vue'
import GenericComponent from 'components/GenericComponent'
if (!Vue.options.components['custom-component']) {
Vue.component('custom-component', GenericComponent)
}

You can do like this:
import { getCurrentInstance } from 'vue';
const app = getCurrentInstance()
console.log('app component', app?.appContext.components['component-name'])
Note that appContext.components will only contain global components.

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')

I can not do Vue Select component for Vue cli installation work

I have install Vue Select component on my Vue cli application but the select behaviour is like a normal v-select.
I had installed using its official documentation. https://vue-select.org/
Here is the installation
npm install vue-select
Then, import and register the component:
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
The component itself does not include any CSS. You'll need to include it separately:
import 'vue-select/dist/vue-select.css';
Alternatively, you can import the scss for complete control of the component styles:
#import "vue-select/src/scss/vue-select.scss";
Here is my main.js
import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import vSelect from "vue-select";
Vue.component("v-select", vSelect);
import 'vue-select/dist/vue-select.css';
import "vue-select/src/scss/vue-select.scss";
import '#/components';
import '#/assets/scss/main.scss';
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
enter code here
Here is how I use the component
<v-select :options="['Canada', 'United States']"></v-select>
but my v-select is the basic select for vue and vuetify, even, no items are load.
I really appreciate your help it is my first reactive application so, many things are great and different to traditional html, js, css proyects.

There is no :options for v-select props.
You must use ":items".
<v-select :items="['Canada', 'United States']"></v-select>
https://vuetifyjs.com/en/api/v-select/#props
See the examples and API.
As long as you need to learn something, you must read official document first.

global definition does not work in vue.js

I have tried to import and define a library globally as below, but somehow it does not recognize the global variable.
in main.js,
import Vue from 'vue'
import App from './App'
import router from './router'
import VueJwtDecode from 'vue-jwt-decode'
Vue.config.productionTip = false
Vue.use(VueJwtDecode)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
in Signup.vue,
...
const payload = VueJwtDecode.decode(res.jwt);
...
and the error shows that VueJwtDecode is not defined.

If you are trying to use the named reference of VueJwtDecode, you need to reimport the library in your Signup.vue compoenent since Signup.vue doesn't understand what VueJwtDecode means.
import VueJwtDecode from 'vue-jwt-decode'
const payload = VueJwtDecode.decode(res.jwt);
However, since you have globally installed the library, it has been installed to the Vue instance, meaning that it is available from the this context within your component. As a result, you can also access it from the component context without reimporting:
const payload = this.$jwtDec(res.jwt);

As document, in your component, you need to use
this.$jwtDec(res.jwt)
instead of
VueJwtDecode.decode(res.jwt);

Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?

I am new to Vue and Vuetify. I just created quick app to check both of them. But I am a running into issues in beginning. The vue fails to identify vuetify components despite following all the steps outlined in document. The error is like below -
vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element:
- did you register the component correctly? For recursive
components, make sure to provide the "name" option.
found in
---> at src\App.vue
You can access the entire code at sandbox https://codesandbox.io/s/40rqnl8kw

You're likely experiencing a problem with the order of your operations. You're defining your own App component that uses the v-app component before you've even told Vue to make use of it, so Vue assumes you're using your own custom v-app component.
Place Vue.use(Vuetify) before starting any Vue instances via new Vue() that require Vuetify components, or place it within the component definitions themselves right at the top of the <script> tag after importing Vue and Vuetify within the single file component. Don't worry if you have more than one Vue.use(Vuetify) statement because only the first one will do anything--all subsequent calls will simply do nothing.
Original - Vue.use() is called before new Vue(), resulting in an error.
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
Vue.use(Vuetify);
Fix - Calling new Vue() after Vue.use() allows Vue to resolve the dependency correctly.
Vue.use(Vuetify);
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});

There is another reason for this error that I recently ran into.
I recently upgraded from Vuetify 1.5 to 2.x and even though I had the order of operations correct as in the currently accepted answer here I was still receiving the error about v-app being unknown:
Unknown custom element: <v-app> - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
Turns out that the upgrade process requires the following addition to package.json devDependencies section which didn't originally exist in my vuetify 1.5x package:
"vuetify-loader": "^1.3.0"
(1.3.0 current version as of this writing)
Once I added that the error went away.

If you are coming from Google: for me it was breaking changes from v1 to v2, that made most Codepen examples useless.
I had to change this to get a very simple Vuetify app with navigation drawers to run again:
remove toolbar from <v-app toolbar>
replace v-toolbar with v-app-bar
replace v-app-bar-side-icon with v-app-bar-nav-icon
replace v-app-bar-title with v-toolbar
replace v-list-tile to v-list-item
replace all flat with text
Maybe this helps someone.
(edited to include cong yu's remark)

Edit: it looks like VuetifyLoader will automatcially do that for you.
Old Answer: Another possible problem is if you have a la carte enabled you will need to also specify all the components that you want included:
import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar,
VFadeTransition
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'
Vue.use(Vuetify, {
components: {
VApp,
VNavigationDrawer,
VFooter,
VToolbar,
VFadeTransition
},
directives: {
Ripple
}
})

With vuetify v2.x you should register the vuetify plugin as follows :
import Vue from 'vue'
/** register vuetify plugin globally **/
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
const vuetify= new Vuetify(opts)
/****/
new Vue({
vuetify,
}).$mount('#app')
Vuetify v3
import { createApp } from 'vue'
import App from './App.vue'
/*****/
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify= createVuetify({
components,
directives,
})
/****/
const app = createApp(App)
app.use(vuetify)
app.mount('#app')

I experienced the same issue. It was caused by the cache of the browser make sure to clear the cache as well.

You will get this error even after installing the official Vuetify 3 (Alpha), due to the standard demo version generated during the install lacking adding components, i.e:
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
const vuetify = createVuetify({
components,
directives,
});
Thus the working version of main.ts for Vuetify 3 is:
import "vuetify/styles"; // Global CSS has to be imported
import { createApp } from "vue";
import { createVuetify } from "vuetify";
import App from "./App.vue";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
const app = createApp(App);
const vuetify = createVuetify({
components,
directives,
});
app.use(vuetify).mount("#app");
// or app.use(vuetify); app.mount("#app");

In case someone like me new working on vue and nuxt. My mistake was that I did not put the s in the last. buildModule should be buildModules.
My nuxt.config.js:
export default {
buildModules:[
"#nuxtjs/vuetify"
],
module:[
"#nuxtjs/axios"
],
components:true
}