im trying to use vue-material
my main.ts is
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
App.use(MdButton)
App.use(MdContent)
App.use(MdTabs)
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
the specific problem is
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
App.use(MdButton)
App.use(MdContent)
App.use(MdTabs)
when i put this in to use vue-material, it just goes to a white screen, and idk why,
i'm new to vue but this seems weird, anyone have any ideas?
Related
I have a instance of createApp and use this in vuetify plugin.
main file
import { createApp } from 'vue'
import App from './App.vue'
export const app = createApp(App)
import '#/plugins/vuetify.ts'
vuetify plugin
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import {app} from '#/main.ts'
app.use(createVuetify())
error: "Uncaught ReferenceError: Cannot access 'app' before initialization at vuetify.ts:7:1"
Thank you in advance.
import statements are hoisted, putting other code above them gives false impression that it will be evaluated first.
main.ts and vuetify.ts contain circular dependency that cannot be resolved. In order to avoid this, app instance should be created in a separate module, app.ts, then it can be imported in both.
Nothing in vuetify.ts requires to execute use() inside this module. A common way is to install components where app is defined, i.e. in main entry point:
vuetify.ts
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
export { createVuetify } from 'vuetify'
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } '#/plugins/vuetify.ts'
export const app = createApp(App).use(createVuetify())
Can someone tell me how can i use only bootstrap grid (from https://bootstrap-vue.org/) in vue project not other packages.
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'
createApp(App).use(router).use(BootstrapVue).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')
I am trying to add Element UI into my Vue3 Project:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
App.use(ElementUI)
createApp(App).use(store).use(router).mount('#app')
So I am following this documentation https://element.eleme.io/#/en-US/component/quickstart but it gives me this error: types.js?a742:39 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
I dont know what I am doing wrong in this regard.
You should use element-plus which is compatible with vue 3:
Installation :
npm install element-plus --save
Usage :
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
I've got this error in console: Uncaught TypeError: _vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined.
main.js
import { createApp } from "vue";
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.use(BootstrapVue);
createApp(App)
.use(store)
.use(router)
.mount("#app");