I'm struggling to understand how to use functions in Vue 3 from 3rd party JavaScript libraries. I am trying to use the interactive fiction library inkjs in my Vue 3 project. I installed it using: npm install inkjs. I am using the composition API. However, I cannot access the functions in inkjs. Specifically, this does not work:
import { ref } from '#vue/reactivity'
import getStory from '../ink/story.js'
import { inkjs } from 'inkjs'
export default {
name: 'HomeView',
setup() {
const { storyContent } = getStory()
const story = new inkjs.Story(storyContent.value)
return { displayText, story }
}
}
Story is the main function in the inkjs library.
It gives this console error:
HomeView.vue?43d0:29 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Story')
at setup (HomeView.vue?43d0:29:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7160:1)
at setupComponent (runtime-core.esm-bundler.js?d2dd:7114:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5468:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5443:1)
at patch (runtime-core.esm-bundler.js?d2dd:5033:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5655:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5689:1)
Related
I'm trying to add vue-phone-number-input on my project. I have installed the package with npm install vue-phone-number-input.
Here is my main.js :
// Code ....
import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';
const app = createApp(App)
.use(IonicVue)
.use(router)
.use(VueCordova)
.use(Camera)
app.component("master-layout", MasterLayout)
app.use(store);
app.component('vue-phone-number-input', VuePhoneNumberInput);
router.isReady().then(() => {
app.mount('#app');
});
And I've imported this line on my template :
<vue-phone-number-input v-model="yourValue" />
But nothing's happening. I have an error :
vue-phone-number-input.common.js?ea25:7355 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.render (vue-phone-number-input.common.js?ea25:7355:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:890:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5598:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5712:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5726:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5508:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5466:1)
at patch (runtime-core.esm-bundler.js?d2dd:5068:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:5252:1)
What's wrong? When I use native Vue, I've never had any problems importing modules. But with Ionic, I've never been able to.
Thank you.
That plugin only works with vue2 : https://github.com/LouisMazel/vue-phone-number-input/issues/159. Ionic uses vue3, you need to use the other plugin he provides.
The Vue Konva setup runs properly on local dev envs
After building the app as it fails to find v-stage tag and Konva component also
Versions being used
"vue": "^2.6.14",
"vue-konva": "^2.1.7",
"konva": "^8.3.10",
Error message
import VueKonva from 'vue-konva'
import App from 'file'
window.Vue.use(VueKonva)
window.custom.extension.register('#ext-size-comparison-view', {
mounted(element) {
window.FPI.extension.mountApp({
element,
component: App,
})
},
})
Error Message
Uncaught TypeError: Cannot read properties of undefined (reading 'component')
at Module.<anonymous> (vue-konva.js:304:106)
at r (vue-konva.js:34:30)
at Object.<anonymous> (vue-konva.js:111:18)
at r (vue-konva.js:34:30)
at vue-konva.js:98:18
at vue-konva.js:15:17
at vue-konva.js:7:20
at 6168 (vue-konva.js:5:1)
I'm trying to integrate the use of Vuex into a very small Vue 3 application, but I'm unable to load things for reasons that are totally unclear to me. My main.js is very simple and does a use() statement on the Vuex store as documentation indicates I should do:
import { createApp } from "vue"
import App from "./app.vue"
import store from "./store.js"
const app = createApp(App)
app.use(store)
app.mount("#app")
The store itself is pretty simple with the first relevant lines looking like the following:
import axios from "axios"
import { createStore } from "vuex"
export default {
store: createStore({
However, when I load my app after it compiles successfully without any warnings, I get this in the debugger:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "$store" was accessed during render but is not defined on instance.
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property 'state' of undefined
at Proxy.events (event-list-by-day.vue?04a6:61)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
at Object.get [as events] (runtime-core.esm-bundler.js?5c40:5611)
at Proxy.render (event-list-by-day.vue?04a6:2)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
What am I missing? I know it's something basic here. Note that installed Vuex as npm install --save vuex#next as the Vuex documentation indicated I should do to support Vue 3.
You're exporting it as an object {store: Store} but what you really want to do is export the Store instance created by createStore().
On your store.js
const store = createStore({
...
...
})
export default store
or
export default createStore({
...
...
})
Need help in fixing the below error :
Vue.directive is not a function
I am using Vue Webpack boilerplate https://github.com/vuejs-templates/webpack for my front-end project.
Here is the structure of the project:
I am getting the following error
[HMR] Waiting for update signal from WDS...
webpack-internal:///./src/helpers/directives.js:1 Uncaught TypeError: Vue.directive is not a function
at eval (webpack-internal:///./src/helpers/directives.js:1)
at Object../src/helpers/directives.js (app.js:4759)
at __webpack_require__ (app.js:708)
at fn (app.js:113)
at Object.eval (webpack-internal:///./src/bootstrap.js:44)
at eval (webpack-internal:///./src/bootstrap.js:142)
at Object../src/bootstrap.js (app.js:4568)
at __webpack_require__ (app.js:708)
at fn (app.js:113)
at eval (webpack-internal:///./src/main.js:22)
webpack-internal:///./node_modules/vue/dist/vue.esm.js:9075 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
webpack-internal:///./node_modules/vue/dist/vue.esm.js:9086 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
helper\directives.js
Vue.directive('click-outside', {
bind: function (el, binding, vnode) {
el.event = function (event) {
// here I check that click was outside the el and his childrens
if (!(el === event.target || el.contains(event.target))) {
// and if it did, call method provided in attribute value
vnode.context[binding.expression](event)
}
}
document.body.addEventListener('click', el.event)
},
unbind: function (el) {
document.body.removeEventListener('click', el.event)
}
})
So I want to implement GraphQL into NuxtJs.
Now I need to have a provider into the root element, but NuxtJs doesn't give me this option.
How would I inject the apolloProvider into the root Vue element?
What I'm trying to accomplish:
https://github.com/Akryum/vue-apollo
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
new Vue({
el: '#app',
apolloProvider,
render: h => h(App),
})
What I've tried:
Creating a plugin: /plugins/graphql.js:
import Vue from 'vue'
import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'
// Create the apollo client
const apolloClient = new ApolloClient({
networkInterface: createBatchingNetworkInterface({
uri: 'http://localhost:3000/graphql'
}),
connectToDevTools: true
})
// Install the vue plugin
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient
})
export default apolloProvider
Importing the apolloProvider in .nuxt/index.js:
...
import apolloProvider from '../plugins/graphql'
...
let app = {
router,
store,
apolloProvider,
_nuxt: {
defaultTransition: defaultTransition,
transitions: [ defaultTransition ],
...
Unfortunately this provides me with 2 problems; each time the server restarts, my code in the .nuxt directory is wiped. Besides that it gives me the following error:
TypeError: Cannot set property '__APOLLO_CLIENT__' of undefined
at new ApolloClient (/current/project-nuxt/node_modules/apollo-client/src/ApolloClient.js:112:37)
at Object.<anonymous> (plugins/graphql.js:6:21)
at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
at Object.module.exports.__webpack_exports__.a (server-bundle.js:1060:76)
at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
at Object.<anonymous> (server-bundle.js:1401:65)
at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
at server-bundle.js:95:18
at Object.<anonymous> (server-bundle.js:98:10)
at evaluateModule (/current/project-nuxt/node_modules/vue-server-renderer/build.js:5820:21)
at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5878:18
at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5870:14
at Nuxt.renderToString (/current/project-nuxt/node_modules/vue-server-renderer/build.js:6022:9)
at P (/current/ducklease-nuxt/node_modules/pify/index.js:49:6)
at Nuxt.<anonymous> (/current/project-nuxt/node_modules/pify/index.js:11:9)
at Nuxt.ret [as renderToString] (/current/project-nuxt/node_modules/pify/index.js:72:32)
at Nuxt._callee2$ (/current/project-nuxt/node_modules/nuxt/dist/webpack:/lib/render.js:120:24)
at tryCatch (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:65:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:303:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:117:21)
at step (/current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
at /current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
Maybe a little late, but there is #nuxtjs/apollo plugin.
I've used this for my blog, using Nuxt 1.0, I'm still doing some testing on Nuxt2, but its giving me issues.. guess I'll stick with V1 for the moment.
.nuxt folder restarts every time you rebuild the project, so it would not be the ideal place to inject your module.
Nuxt has nuxt.config.js where you can add your modules to its module array.
they are imported at runtime so make sure they are already transpiled (eg. all the es6 conversions are taken care off)
better description is available in the docs
#nuxtjs/apollo seems like a good option, however if you want to write your own graphql module, this is the way
I'm using [nuxt-apollo][1] "nuxt": "^2.10.2" without issues so far.
npm i #nuxtjs/apollo &&
npm install --save #nuxtjs/apollo
# if you are using *.gql or *.graphql files add graphql-tag to your dependencies
npm install --save graphql-tag
1.Youll need to set up your config as you've stated above,
In nuxt.config.js
export default {
...
modules: ['#nuxtjs/apollo'],
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu' //link to your graphql backend.
}
}
}
}
Make your query
in gql/allCars.gql
{
allCars {
id
make
model
year
}
}
use graphql in your component
in pages /index.vue
<script>
import allCars from '~/apollo/queries/allCars'
export default {
apollo: {
allCars: {
prefetch: true,
query: allCars
}
},
head: {
title: 'Cars with Apollo'
}
}
</script>