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>
Related
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");
Hiii i have one array like more than one object and when store data from redux i need to remove automatic from array after 5 second.
welcome to the community! For your problem maybe use a useEffect hook in the app component, eg:
import foo from "foo.js";
import blahblahblah from "xxx.js";
import React from "react";
import {useDispatch} from "react-redux";
// ..;
function App(){
const dispatch = useDispatch();
React.useEffect(()=>{
while(true){
setTimeout(()=>{
dispatch.runSomthing(myAmazingData);
},5000);
}
}, []);
return(
<div>
<p>Welcome to my amazing website😀</p>
</div>)
}
export default App;
Next time, show some code! And explain your intentions and what you want to do.
Thanks!
I am new on redux.I want to implement redux on react. I have created todo list and it is working well with redux.As a practice I have created a new component called Calculate to increase and decrease a number under the todo list.I have two reducer for that.I combined two reducers in index.js.But as far as I understand combining is not working. I face with error like that "
TypeError: this.props.messages.map is not a function".But when without combining the reducers,and sending only messaageReducer to store, my app working well.Here is my code.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import messageReducer from "./reducers/reducers"
import {Provider} from "react-redux"
import {combineReducers, createStore} from "redux"
import Calculate from "./calculate"
import counter from "./reducers/reducers2"
const rootReducer = combineReducers({
counter,
messageReducer,
})
const store = createStore(rootReducer)
ReactDOM.render(
<Provider store={store}>
<App />
<Calculate/>
</Provider>,
document.getElementById('root')
);
combineReducers changes the shape of your store.
What was state.X before is now state.messageReducer.X.
That's also, why messageReducer is a bad name here.
Do
const rootReducer = combineReducers({
counter,
message: messageReducer,
})
instead and it will become state.message.X.
Also, please note that if you are doing all this by hand, you are probably learning an old style of Redux and are problably following outdated documentation. While this shows very well what Redux does internally, in modern Redux you should not be doing all this by hand. Please follow the official Redux tutorials at https://redux.js.org/tutorials/essentials/part-1-overview-concepts
Can you import one .stories file into another .stories with Storybook?
Eg I have
/component1/component1.tsx
/component1/component1.stories.tsx
/component2/component2.tsx
/component2/component2.stories.tsx
I would like to also have a story for all of my components:
In /all-components/all-components.stories.tsx
import * as React from 'react';
import Component1Story from '../component1/component1.stories.tsx';
import Component2Story from '../component2/component2.stories.tsx';
export const Test = () => {
return (
<div>
<Component1Story />
<Component2Story />
</div>
);
};
export default {
title: 'Components',
};
I get this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of storyFn.
this should be doable as your stories are just React components. Your problem is happening because you're trying to import the default from your module, which is actually just an object:
export default {
title: 'Components',
};
All stories are named exports, and you should import them with destructuring:
import { Component1Story } from '../component1/component1.stories';
import { Component2Story } from '../component2/component2.stories';
I created an example for you which shows a working scenario here.
p.s. It's interesting to know that starting with Storybook 6 there's a new mechanism to simplify the creation and reuse of stories so stay tuned! It's called Args.
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)