I am using: npm install vue-stripe-checkout, but a i get this error:
vue.runtime.esm.js?2b0e:5106 Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
at eval (main.js?56d7:5)
at Module../src/main.js (app.js:1148)
in my main.js:
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueStripeCheckout from 'vue-stripe-checkout';
Vue.use(VueStripeCheckout, "pk_test_wk9TFDEeu4kRrI1pT0WxYrBC00bSQO9djj");
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
Looks like you're using the newest version of vue-stripe-checkout which has breaking changes that doesn't allow you to use as above way (as a plugin)
It currently exports 2 components: StripeCheckout and StripeElements which requires you to use them as component instead.
Here is a very basic example:
<template>
<stripe-checkout
ref="checkoutRef"
:pk="publishableKey"
:items="items"
:successUrl="successUrl"
:cancelUrl="cancelUrl"
>
<template slot="checkout-button">
<button #click="checkout">Check out</button>
</template>
</stripe-checkout>
</template>
<script>
import { StripeCheckout } from 'vue-stripe-checkout';
export default {
components: {
StripeCheckout
},
data: () => ({
loading: false,
publishableKey: 'YourKey',
items: [
{
sku: 'sku_FdQKocNoVzznpJ',
quantity: 1
}
],
successUrl: 'your-success-url',
cancelUrl: 'your-cancel-url',
}),
methods: {
checkout () {
this.$refs.checkoutRef.redirectToCheckout();
}
}
}
</script>
You could reference to here to see all examples for both components: https://github.com/jofftiquez/vue-stripe-checkout
Related
Hi I have installed Vuejs 3 and I am trying to embed a vimeo video with this library: import vueVimeoPlayer from 'vue-vimeo-player'.
I imported this in the main.js like this:
import vueVimeoPlayer from 'vue-vimeo-player'
Vue.use(vueVimeoPlayer)
My view is this one:
<template>
<div id="app">
<vueVimeoPlayer
ref="player"
:video-url="url"
:player-height="500"
:player-width="500"
:autoplay="true"
/>
<div #click="updateUrl()">click me</div>
<div #click="errorUrl()">error pls</div>
</div>
</template>
<script>
import { vueVimeoPlayer } from 'vue-vimeo-player';
export default {
name: 'App',
components: {
vueVimeoPlayer,
},
data () {
return {
url: "https://vimeo.com/605358147/b5c4f01703",
};
},
methods: {
updateUrl() {
this.url = "https://vimeo.com/604413787/dd09a5711";
},
errorUrl() {
this.url = "https://vimeo.com/605266340/a7aa996ffc";
},
},
};
</script>
I receive this huge error:
TypeError: Object(...) is not a function
at Proxy.render (index.es.js?558f:174:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at new Watcher (vue.runtime.esm.js?2b0e:4484:1)
etc
etc
So I wonder what am I doing wrong? Because I saw it working check this url:
https://codesandbox.io/s/m4z5v63jqy
Thanks
Vue.use is not directly available anymore in Vue3, you would have to use createApp().use
That's why you're seeing error. Try like this
Make sure you've install correct version of vue-vimeo-player to support Vue3
import { createApp } from 'vue'
import App from './App.vue'
import vueVimeoPlayer from 'vue-vimeo-player'
const app = createApp(App)
app.use(vueVimeoPlayer).mount("#app");
I used Vue 3 cli to install new testing ground for store and router to learn those.
Project come like this :
main.js:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App).use(store).use(router).mount("#app");
store.js (just added count for testing):
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {},
actions: {},
modules: {},
});
and in views:
Home.vue:
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// # is an alias to /src
import HelloWorld from "#/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
mounted() {
console.log(store.state.count)
},
};
</script>
By all that I have read I should be able to access store in component with:
mounted() {
console.log(store.state.count)
},
But i get store is not defined.
While it is obliviously imported and used in main app with index.js's:
import store from "./store";
createApp(App).use(store)
I heave spent hours on this, please advise. This is out of the box cli installation, i don't understand what they wont me to do...
You've to access it using this and prepended by $ sign:
export default {
name: "Home",
components: {
HelloWorld,
},
mounted() {
console.log(this.$store.state.count)
},
};
I am using: https://www.npmjs.com/package/vue-loading-overlay
My main.js file looks like:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
And App.vue:
<template>
<div id="app">
<loading
:active.sync= "isLoading"
:can-cancel= "false"
:is-full-page= "false">
</loading>
<router-view></router-view>
</div>
</template>
<script>
//import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
//Vue.use(Loading);
export default {
data() {
return {
isLoading: true
}
},
name: 'App',
components: {
Loading
}
}
</script>
<style>
</style>
This seems to work fine, but how can I manipulate the isLoading to be true or false, from main.js? I might be building a function or something in main.js for future use, and instead of having the <loading> on each view page, I would prefer to be able to control it globally some how.
I haven't tested this, but based on the referenced answer in my comment, this might work:
main.js
new Vue({
el: '#app',
props: ['isLoading'],
components:{App},
template: '<App v-bind:isLoading="true">'
})
You would have to make isLoading a prop in App.vue. The v-bind part above should make the prop reactive.
Also, you could create a bus and send events from main.js to App.vue, then update isLoading accordingly.
You should use store for it.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
isLoader: false,
},
getters: {
isLoader(state) {
return state.isLoader
},
},
mutations: {
isLoader(state, status) {
state.isLoader = status
},
},
actions: {
isLoader({commit}, status) {
commit('isLoader', status)
},
}
})
everywhere in your application you can set the isLoader to true using dispatch
vue.$store.dispatch("isLoader", true/false);
I am developing a single-page-application using vue-cli3 and npm.
The problem: Populating a basic integer value (stored in a vuex state) named counter which was incremented/decremented in the backend to the frontend, which displays the new value.
The increment/decrement mutations are working fine on both components (Frontend/Backend), but it seems like the mutations don't work on the same route instance: When incrementing/ decrementing the counter in backend, the value is not updated in the frontend and otherwise.
store.js:
Contains the state which needs to be synced between Backend/Frontend.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
counter: 10
},
mutations: {
increment (state) {
state.counter++
},
decrement (state) {
state.counter--
}
}
})
index.js:
Defines the routes that the vue-router has to provide.
import Vue from 'vue'
import Router from 'vue-router'
import Frontend from '#/components/Frontend'
import Backend from '#/components/Backend'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Frontend',
component: Frontend
},
{
path: '/backend',
name: 'Backend',
component: Backend
}
],
mode: 'history'
})
main.js:
Inits the Vue instance and provides the global store and router instances.
import Vue from 'vue'
import App from './App'
import router from './router'
import { sync } from 'vuex-router-sync'
import store from './store/store'
Vue.config.productionTip = false
sync(store, router)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Frontend.vue/Backend.vue:
Both (Frontend/Backend) use the same code here.
They use the state counter in order to display and modify it.
<template>
<div> Counter: {{ getCounter }}
<br>
<p>
<button #click="increment">+</button>
<button #click="decrement">-</button>
</p>
</div>
</template>
<script>
export default {
name: 'Frontend',
methods: {
increment () {
this.$store.commit('increment')
},
decrement () {
this.$store.commit('decrement')
}
},
computed: {
getCounter () {
return this.$store.state.counter
}
}
}
</script>
It would be awesome if someone sould tell me what I am missing or if I have misunderstood the concept of vuex and vue-router.
Just get the counter from the store for both components. You don't need data as store is already reactive.
<template>
<div> Counter: {{ counter }}
<br>
<p>
<button #click="increment">+</button>
<button #click="decrement">-</button>
</p>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'Frontend',
methods: {
...mapMutations([
'increment',
'decrement',
])
},
computed: {
...mapState({
counter: state => state.counter,
})
}
}
</script>
For reference:
mapState: https://vuex.vuejs.org/guide/state.html#the-mapstate-helper
mapMutations: https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components
#sebikolon component properties that are defined in data () => {} are reactive, methods are not, they are called once. Instead of {{ getCounter }}, just use {{ $store.state.counter }}. OR initiate property in each component that gets the value of your state.
data: function () {
return {
counter: $store.state.counter,
}
}
I tried to use vue-router inside actions of vuex, which is working fine at localhost.
However, i got errors when I tried to prepare store(for mock) by importing "actions" from store file.
Could you help me out in this issue?
versions
vue-test-utils: 1.0.0-beta.16
yarn: 1.5.1
vuejs: 2.5.13
vue-jest: 1.4.0
error msg
FAIL test/components/main.test.js
● Test suite failed to run
/Users/gulliver/Desktop/test/vue-test-utils-jest-example/node_modules/vue/dist/vue.esm.js:10809
export default Vue$3;
^^^^^^
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/router/main.js:1:203)
at Object.<anonymous> (src/store/main.js:3:13)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.354s
Ran all test suites matching /test\/components\/main.test.js/i.
error An unexpected error occurred: "Command failed.
Exit code: 1
app/src/main.js
import Vue from "vue/dist/vue.esm";
import App from './App.vue'
import store from './store/main.js';
import router from './router/main.js';
new Vue({
el: '#app',
render: h => h(App),
store,
router,
})
app/src/store/main.js
import Vue from "vue";
import Vuex from 'vuex';
import router from '../router/main.js'
Vue.use(Vuex)
export const actions = {
locationTo(context, url){
router.push(url)
}
}
export default new Vuex.Store({
actions,
})
app/src/router/main.js
import Vue from "vue/dist/vue.esm";
import VueRouter from 'vue-router';
import root from '../components/root.vue';
import hoge from '../components/hoge.vue';
Vue.use(VueRouter)
export const routes = [
{ path: '/', component: root},
{ path: '/hoge', component: hoge},
];
export default new VueRouter({
mode: 'history',
routes
})
app/test/components/main.test.js
import Vue from "vue";
import Vuex from "vuex";
import { shallowMount, createLocalVue } from "#vue/test-utils";
import { actions } from "#/store/main"; //NOTE: this causes error
import _ from "lodash";
const localVue = createLocalVue();
import root from '#/components/root.vue'
import hoge from '#/components/hoge.vue'
describe('increment.vue', () => {
let propsData;
let store;
let wrapper;
beforeEach(() => {
propsData = _.cloneDeep(personObject)
store = new Vuex.Store(_.cloneDeep({
actions,
}))
const $route = {
path: '/hoge', components: hoge
}
wrapper = shallowMount(root, {
localVue,
propsData,
store,
use: ['Vuex'],
stubs: ['router-view'],
mocks: {
$route
}
})
});
it('test:router in store', () => {
// check if URL changed after action executed
});
})
components
// App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
// root.vue
<template>
<div>
<p>root component</p>
</div>
</template>
<script>
export default {
mounted () {
this.$store.dispatch('locationTo', '/hoge')
},
}
</script>
// hoge.vue
<template>
<div>
<p>hoge template</p>
</div>
</template>
This error is related to the fact that Jest runs in a Node.js environment, and you are using export default, which does not work by default in Node.js (Node uses module.exports). I guess you are using webpack for your dev/production build, but not for the test environment.
Are you using Jest? If so, you will need to set up babel-jest so Jest knows how to read ES Modules syntax (import/export).
Read more here: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
This can be annoying to set up, let me know if you need more help to get it working.