Every single tutorial for how to use Firebase with Vue says that in the main.js file I have to add Vue.use(VueFire); which makes sense. But then I just get this message export 'default' (imported as 'VueFire') was not found in 'vuefire'.
I tried using import * as VueFire from 'vuefire' and it didn't give the error message anymore, but it doesn't seem to be using the plugin.
this is the main.js file
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueFire from 'vuefire'
Vue.config.productionTip = false
Vue.use(VueFire);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Older documentation I think. Try this instead.
import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)
just looking at new documentation here
https://vuefire.vuejs.org/vuefire/getting-started.html
import Vue from 'vue' import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)
Related
i have installed rellax.js in vue3 project.
import App from './App.vue'
import VueRellax from 'vue-rellax'
createApp(App).use(VueRellax).mount(#app)
but when i add rellax class on any components template tags its not working
<section class="rellax section portfolio-section pd-34" id="portfolio">
<PortfolioComponent />
</section>
not working when i add class rellax in component class even doesnot show in inspect
It looks like vue-rellax was never rewritten for Vue 3. You're likely better off to use the rellax library and import it into your components or as a window variable.
App.vue:
<script setup>
import { onMounted } from 'vue';
import Rellax from 'rellax'
onMounted(() => {
let rellax = new Rellax('.rellax');
})
</script>
I try using Vue 3, but I look can't using Vue.use(exampleplugin) again.
I using command vue add bootstrap-vue after generate vue create project. And on plugin bootstrap-vue warning with code:
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Output warning terminal:
warning in ./src/plugins/bootstrap-vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/utils/vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
What's wrong with that? And how do I use vue 3 to add plugin bootstrap-vue?
Bootstrap Vue is not yet ready for Vue 3.
To answer part of your question, Vue 3 changes the method for instantiating the application instance, including how plugins are registered.
For example...
import { createApp } from 'vue';
import Router from './router/Router';
createApp({/* options */}})
.use(Router)
.mount('#app');
You can read more about this at the official docs.
https://v3.vuejs.org/guide/instance.html
https://v3-migration.vuejs.org
For vue 3 you can use
bootstrap-vue-3
Install: npm i bootstrap-vue-3
Config:
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");
I want to use the functionally of the vue-papa-parse in a composable file. I have tested and found vue-papa-parse to work as described when I import it into a vue component. But I can't figure out how to import it into my JavaScript composable function.
main.js
import { createApp } from 'vue'
import App from './App.vue'
import VuePapaParse from 'vue-papa-parse'
const app = createApp(App)
app.use(VuePapaParse)
app.mount('#app')
usePapaParse.js
import VuePapaParse from 'vue-papa-parse'
export default function usePapaParse(){
function csvToJson(){
this.$papa.parse('name,address,city,state,zip') // error, can't read parse of undefined
console.log(this.$papa.data)
}
}
I think your problem is because you are not in the scope of a .vue file and thus do not have injected defaults.
I suspect this library exposes some export that you can use directly.
try to call some function directly on the imported object
import VuePapaParse from 'vue-papa-parse'
//maybe VuePapaParse.parse
VuePapaParse.someFunc
second approach
import * as papa from 'vue-papa-parse'
//check what intellisense shows here
papa.<something>
I'd like to know how I can disable Vuetify styling. It messed up my whole website.
I just need it for the functionality of v-btn and v-text-field. I do not want to use any of the actual styles for anything.
Thanks.
The main.js
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')
According to docs you can disable generation of vuetify stylesheet by configuring your plugin like so:
const vuetify = new Vuetify({
theme: {
disable: true
}
})
Running npm run build outputs a diffrent css compiled website than when running npm start what's the difference and why does it happen? The posts i found were about changing webpack.config but i know that create-react-app work a bit differently. May you shine some light?
My app.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {store, persistor} from './Reducers/configStore'
import {PersistGate} from 'redux-persist/integration/react'
import './index.css';
import './App.css';
import "normalize.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "#blueprintjs/core/lib/css/blueprint.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
import 'react-notifications-component/dist/theme.css';
require('dotenv').config();
const Piazeta = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
)
}
ReactDOM.render(<Piazeta />, document.getElementById('root'));
The problem was that in the development build the bootstrap css was overwriting the css written by me and in the production build it was the other way around. I had a couple of things named the same which made the problems appear. Double check your css every time i guess, the order of them differs in prod and build