I want to use this package https://www.npmjs.com/package/vue-json-viewer in my vue3 project.
*Main.vue
<json-viewer :value="Data"></json-viewer>
<script>
import JsonViewer from 'vue-json-viewer'
import vue from 'Vue'
...
components:{JsonViewer}
Related
New to Vue, but trying to get v-select working. I'm getting vue is not defined when importing. Then when I import vue I'm getting a different error as listed below:
main.js
import { createApp } from 'vue'
import App from './App.vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
import 'vue-select/dist/vue-select.css';
createApp(App).mount('#app')
Error
-- 'Vue' is not defined
When adding import Vue from 'vue'
Cannot read properties of undefined (reading 'component')
Assuming you've installed the right version of v-select that's compatible with vue 3 you should use app.component(...) to register it not Vue.component(...) :
import { createApp } from 'vue'
import App from './App.vue'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css';
const app=createApp(App)
app.component('v-select', vSelect)
app.mount('#app')
I am trying to use the bootstrap library in my Vue project, after having installed it as indicated in the bootstrap official page I do the imports in the main.js file and when I use Vue.use(BootstrapVue) my application stops working because Vue is undefined.
import Vue from 'vue'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue) //here is the problem
createApp(App).use(router).mount('#app')
How can I use multiple plugins within vuejs 3?
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(router, axios, Antd).mount('#app')
Within Main.js, this seems to import router and axios, but not Antd. If I take off router, and axios then I can see antd components.
How do I bring in everything?
Each plugin must be in its own app.use() call:
createApp(App).use(pluginA).use(pluginB).use(pluginC).mount('#app')
However, axios is not a Vue plugin, so don't install that with app.use().
Your code should look similar to this:
createApp(App).use(router).use(Antd).mount('#app')
I created a Vuejs project using vue create command provided after installing npm i #vue/cli. Now in my project I want to use this component. In it's installation guide it says:
"Then, import and register the component:"
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
But where? None of my main.js files does not even include Vue from 'vue'
In vuejs3, you can use like this in main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).component('v-select', vSelect).mount("#app");
doc: https://v3.vuejs.org/guide/component-registration.html
I've installed in vue js bootstrap vue, with the following command
yarn add bootstrap-vue bootstrap axios
Code:
ERROR Failed to compile with 1 errors 2:56:01 AM
error in ./src/main.js
Module Error (from ./node_modules/eslint-loader/index.js):
/home/ronin/Documents/V2/test/src/main.js
7:1 error 'Vue' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
# multi (webpack)-dev-server/client?http://192.168.0.161:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
If you wanted to use Vue.use() you needed to import Vue from 'vue'
Or import { createApp, use } from 'vue' and use use() function instead of Vue.use()
And you might needed to reconsider on import orders.
Eg:
import { createApp, use } from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
use(BootstrapVue)
createApp(App).use(router).mount('#app')
Or you could import whole vue shown below
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.createApp(App).use(router).mount('#app')