I have basic code from https://tiptap.dev/installation/vue2#3-create-a-new-component, but when component is loaded it throw error vue.esm.js?a026:628 [Vue warn]: Error in nextTick: "InvalidCharacterError: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('[object HTMLDivElement]') contains the invalid name-start character '['."
command executed: npm i #tiptap/vue-2 #tiptap/starter-kit
Element code:
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '#tiptap/vue-3';
import StarterKit from '#tiptap/starter-kit';
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
};
},
mounted() {
this.editor = new Editor({
content: `'<p>I’m running Tiptap with Vue.js. 🎉</p>'`,
extensions: [StarterKit],
});
},
beforeDestroy() {
this.editor.destroy();
},
};
</script>
you imported '#tiptap/vue-3'; while installed npm i #tiptap/vue-2 #tiptap/starter-kit
Both are not compatible, you need to install the right version your using, there u need to install tiptap/vue3
Related
I am working on a project in nuxt3 and I wanna add google places auto-complete on search input. I've been search for last 4 hours but can't got a way to set it up.
After long research I found the below solution working for me in the nuxt3 stable version.
Install the following version (0.9.72) of #fawmi/vue-google-maps
your package.json file:
"dependencies": {
"#fawmi/vue-google-maps": "0.9.72",
}
in nuxt.config.ts add following lines
build: {
transpile: ["#fawmi/vue-google-maps"],
},
Then create folder named plugins and make a file inside it named vueGoogleMaps.ts
📦plugins
┗ 📜vueGoogleMaps.ts
Your vueGoogleMaps.ts file:
import { defineNuxtPlugin } from "#app";
import VueGoogleMaps from "#fawmi/vue-google-maps";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGoogleMaps, {
load: {
key: "Your-key",
libraries: "places", // This is required if you use the Autocomplete plugin
},
autobindAllEvents: true,
});
});
then in example.vue:
<template>
<GMapAutocomplete
placeholder="This is a placeholder"
#place_changed="setPlace"
>
</GMapAutocomplete>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
methods: {
setPlace() {
}
}
}
</script>
I'm using queries Apollo and i want to know how to wait datas to display my page.
Because i'm getting warning and errors. See screen
import TemplatePresentationPage from "./../components/TemplatePresentationPage.vue";
import gql from 'graphql-tag'
export default {
apollo: {
entry: gql`MY QUERY`
},
components: { TemplatePresentationPage },
name: "PresentationRoyalArmy",
props: {},
setup() {
},
};
</script>
<template :v-if="entry">
<TemplatePresentationPage
:resultOfQuery="entry.datas"
/>
</template>
<style lang="scss" scoped></style>
Ok i found a solution:
Need ton install vue composable (https://v4.apollo.vuejs.org/guide-composable/setup.html)
See this page (https://v4.apollo.vuejs.org/guide-composable/query.html#usequery)
I want to use annotorious (with openseadragon plugin) in a vue.js (vue 3) template.
I've installed annotorious with npm.
This is what i've got so far:
<template>
<div class="flex-grow">
<img ref="tag_img" width="100%" :id="img_id" src='../../assets/images/apple.png'>
</div>
</template>
<script>
import * as Annotorious from '#recogito/annotorious-openseadragon'
import '#recogito/annotorious-openseadragon/dist/annotorious.min.css'
export default {
props: {
img_id: String
},
mounted: function () {
var anno = Annotorious({
image: this.$refs.tag_img
}, {})
anno.setDrawingTool('polygon')
}
}
</script>
I recieve the following error in my browser:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'style' of undefined"
found in
---> <AnnotoriousImage> at src/components/interaction/AnnotoriousImage.vue
<Tagging> at src/components/pages/Tagging.vue
<App> at src/App.vue
<Root>
warn # vue.esm.js?efeb:628
logError # vue.esm.js?efeb:1893
...
vue.esm.js?efeb:1897 TypeError: Cannot read property 'style' of undefined
You are mixing up the standard version of Annotorious (for images) and the OpenSeadragon plugin (for high-res images, displayed in the OpenSeadragon viewer) I believe.
What you are importing is the OpenSeadragon version. But the way you are initializing is the one you'd use for the standard version of Annotorious.
Assuming you want to annotate a normal image: the init is correct. But you'd need to
import * as Annotorious from '#recogito/annotorious'
The answer of Rainer brought me to a working version. It is possible to init it in the mount function of annotorious.
import OpenSeadragon from 'openseadragon'
import * as Annotorious from '#recogito/annotorious-openseadragon'
import '#recogito/annotorious-openseadragon/dist/annotorious.min.css'
export default {
props: {
img_url: String,
default: '../../../assets/images/apple.png'
},
mounted: function () {
const viewer = OpenSeadragon({
id: 'annotorious_container',
minZoomImageRatio: 0,
maxZoomPixelRatio: Infinity,
tileSources: {
type: 'image',
url: require('../../../assets/images/apple.png'),
ajaxWithCredentials: false,
fitBounds: true
}
})
var options = {
disableEditor: true // the default editor is disabled to implement a custom behaviour
}
var anno = Annotorious(viewer, options)
anno.setDrawingTool('polygon')
window.viewer = viewer
window.anno = anno
},
components: {
'Icon': Icon,
'AnnotoriusEditorPopup': AnnotoriusEditorPopup
}
}
I am trying to get the 'version' from package.json in my Vue/Quasar project.
There was an information in the internet to use this code:
import { version } from '../package.json'
Now I am a beginner and I cannot get this running.
My current code looks somewhat like this:
<template>
// ... REMOVED CODE FOR BETTER READABILITY
<q-layout view="lHh Lpr lFf">
<q-page-container>
<div>VERSION: {{ version }}</div>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import { version } from '../package.json'
export default {
name: 'Layout',
data () {
return {
leftDrawerOpen: false
}
},
components: {
version
}
}
</script>
ESLint throws the following error:
87:5 error The "version" component has been registered but not used
vue/no-unused-components
How do I use the component variable I imported correctly?
Follow these steps it will works fine
import {version} from '../../package.json'
data: () => ({
appVersion:version
}),
{{appVersion}}
(or)
Vue.prototype.application_version = require('../package.json').version;
Remove this piece of code:
components: {
version
}
You are trying to register it as a component which it is not.
Then add the version to vue:
data () {
...
version: version
}
I'm new to both Vue and Form.io, so there is something simple I'm missing here. I'm getting the error "Module not found: Error: Can't resolve 'vue-formio'" in this Form.vue component:
<template>
<formio src="https://rudtelkhphmijjr.form.io/demographics" v-on:submit="onSubmitMethod" />
</template>
<script>
import { Formio } from 'vue-formio';
export default {
components: {
formio: Formio
},
methods: {
onSubmitMethod: function(submission) {
console.log(submission);
}
}
};
</script>
This was an iteration of original Formio instruction that said "embed a form within your vue application, create a vue component using [this] formio component":
<template>
<formio :src="formUrl" v-on:submit="onSubmitMethod" />
</template>
<script>
import { Formio } from 'vue-formio';
export default {
data: function() {
// Load these from vuex or some other state store system.
return {
formUrl: "https://rudtelkhphmijjr.form.io/demographics"
}
},
components: {
formio: Formio
},
methods: {
onSubmitMethod: function(submission) {
console.log(submission);
}
}
};
</script>
But this too also returned the "Module not found: Error". Here is my App.vue:
<template>
<div id="app">
<Form />
</div>
</template>
<script>
import Form from './components/Form.vue'
export default {
name: 'app',
components: {
Form
}
}
</script>
I set up the basic project using Vue CLI and used npm install --save vue-formio before firing it up. Newbie help greatly appreciated!
I've also just noticed that vue-formio is not registered (as a dependency?) in package.json so perhaps that is related.
In documentation import { Form } from 'vue-formio';
so you should replace your import on 6 line to import { Form: Formio } from 'vue-formio';