I'm learning Vue and try to build first app with vue-cli.
I have simple local components that works well.
But I have a problem when I want to use external components.
E.g. 'vuetable-2'.
I install it locally via npm using terminal:
npm install --save vue-multiselect
Installation is succesfull and the 'vue-multiselect' folder appears in the 'node_modules' catalogue. Then I add proper references in my Single-File Component 'ms.vue' file:
<template>
<div>
Hello world!
<label class="typo__label">Select with search</label>
<multiselect v-model="value" :options="options" :custom-label="nameWithLang" placeholder="Select one" label="name" track-by="name">
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: { name: 'Vue.js', language: 'JavaScript' },
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP' },
{ name: 'Phoenix', language: 'Elixir' }
]
}
},
methods: {
nameWithLang ({ name, language }) {
return `${name} — [${language}]`
}
}
}
</script>
<style>
</style>
Everything compiles well, but when I go to the browser then the page is empty and got the following error in console:
runtime-core.esm-bundler.js?5c40:5435 Uncaught TypeError: selfHook.call is not a function
at callSyncHook (runtime-core.esm-bundler.js?5c40:5435)
at applyOptions (runtime-core.esm-bundler.js?5c40:5227)
at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6006)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:5942)
at setupComponent (runtime-core.esm-bundler.js?5c40:5882)
at mountComponent (runtime-core.esm-bundler.js?5c40:4161)
at processComponent (runtime-core.esm-bundler.js?5c40:4137)
at patch (runtime-core.esm-bundler.js?5c40:3784)
at mountChildren (runtime-core.esm-bundler.js?5c40:3950)
at mountElement (runtime-core.esm-bundler.js?5c40:3896)
I've tried with other component and got same error.
My 'App.vue' file:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<ms></ms>
</div>
</template>
<script>
import ms from './components/ms.vue'
export default {
name: 'App',
components: {
ms
}
}
</script>
<style>
</style>
edit 2020-09-02:
What I see is that the issue appears only in Vue3. When I recreate the whole project in Vue2 everything works well. But still no idea about the core reason of the problem...
Related
In my Nuxt.js project I installed vue2-editor package to be able to write articles with HTML. When I come to page, write something and press the button everything works correctly, but when I reload page, I get document is not defined error.
Here is the code:
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button #click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor';
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>
And the error looks like that:
Also in documentation I've found that for Nuxt.js projects vue2-editor should be added to modules, and I did it, but it still doesn't work:
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'vue2-editor/nuxt'
],
You can try to load it dynamically:
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button #click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor: () => process.client ? (await import("vue2-editor")).VueEditor : ""
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>
Do follow the below steps the add that plugin into your Nuxt
There will be plugins folder just like pages and components, if not create one and add a js file into it vue2-editor.js.
Copy the below content inside vue2-editor.js
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);
Inside nuxt.config.js remove the 'vue2-editor/nuxt' from the modules and create a separate array called plugins as below
/*
** Plugins to load before mounting the App
*/
plugins: [{ src: "~/plugins/vue2-editor", mode: 'client' }],
Thats it you are done. Now you can start using it in any of the vue files like
<vue-editor placeholder="Write Something..." v-model="content"></vue-editor>
I'm having an issue with rendering quasar components in the storybook with Vue and Quasar. I suspect it's not finding the quasar tags in the story. I just followed these steps to set up the project https://quasar.dev/start/vue-cli-plugin and then I ran npx sb init to set up the storybook in my app. After all, compilation works fine but when I view my story on the storybook screen I got the below error that appears. You check the screen here https://prnt.sc/1qd3ywr
I tried all possible solutions but none had worked. Any suggestions would be appreciated.
TypeError: Cannot read property 'screen' of undefined
at setup (http://localhost:6006/vendors~main.iframe.bundle.js:89474:322262)
at callWithErrorHandling (http://localhost:6006/vendors~main.iframe.bundle.js:37183:22)
at setupStatefulComponent (http://localhost:6006/vendors~main.iframe.bundle.js:44151:29)
at setupComponent (http://localhost:6006/vendors~main.iframe.bundle.js:44107:11)
at mountComponent (http://localhost:6006/vendors~main.iframe.bundle.js:42108:13)
at processComponent (http://localhost:6006/vendors~main.iframe.bundle.js:42083:17)
at patch (http://localhost:6006/vendors~main.iframe.bundle.js:41698:21)
at componentEffect (http://localhost:6006/vendors~main.iframe.bundle.js:42220:21)
at reactiveEffect (http://localhost:6006/vendors~main.iframe.bundle.js:36022:24)
at effect (http://localhost:6006/vendors~main.iframe.bundle.js:35997:9)
Here is my story for the quasar component: (quasar.stories.js)
import { QLayout, QPageContainer, QPage, QSelect, QBtn } from 'quasar'
export default {
title: 'Quasar'
}
export const Components = () => ({
title: 'QuasarComponents',
components: { QLayout, QPageContainer, QPage, QSelect, QBtn },
template: `<q-layout>
<q-page-container>
<q-page class="full-height full-width justify-center items-center q-pa-xl">
<div class="col-auto">
<q-input v-model="name" label="Full name" />
<q-select v-model="role" :options="options" label="User Role" />
</div>
</q-page>
</q-page-container>
</q-layout>`,
data () {
return {
name: null,
role: 'User',
options: ['Admin', 'Supervisor', 'User']
}
}
})
main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
]
}
preview.js
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
This looks like GitHub issue #7263, which is caused by an app extension.
One user discovered a solution:
em-qui is an app-extension that was also declaring quasar as a devDependency (for IDE support...), though on the same version this was somehow causing a confict:
{
"devDependencies": {
"graphql-tag": "^2.10.3",
"quasar": "^1.12.6"
},
}
So I had to separate the two by declaring it in peerDependencies in the app extension:
{
"devDependencies": {
"graphql-tag": "^2.10.3"
},
"peerDependencies": {
"quasar": "^1.12.6"
}
}
and the error went away.
Everything is fine and shown as what i intended. But at console
> vue.js:2 [Vue warn]: Unknown custom element: <canvas-datagrid> - did
> you register the component correctly? For recursive components, make
> sure to provide the "name" option.
>
> found in
>
> ---> <CGrid> at Vue/Components/cGrid.vue
> <Root>
npm install --save-dev canvas-datagrid
cGrid.vue as below
<template>
<canvas-datagrid :data.prop='d'></canvas-datagrid>
</template>
<script>
import cGrid from "canvas-datagrid"
export default {
name: "c-grid",
data() {
return {
d: [
{ col1: 'abc' },
{ col1: 'def' }
]
}
},
components: {
cGrid
}
}
</script>
How can i fix that warning?
finally found the problem. Vue.config.ignoredElements = ['canvas-datagrid'];
I'm currently learning Vue.js & Node.js, and I can't find out a way to insert images with URL, not upload them to the server. I'm using CKEditor 5's official package for Vue, here's my code:
<template>
<v-container>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</v-container>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
export default {
name: 'NewPost',
data: function () {
return {
editor: ClassicEditor,
editorData: '',
editorConfig: {}
}
}
}
</script>
Thanks in advance!
I have a trouble connecting vue2-editor (based on quill) with highlight.js
No matter what I do, I get an error saying:
Syntax module requires highlight.js. Please include the library on the page before Quill.
I'm using nuxt if it changes anything.
I've tried adding this line at the beginning of script tag:
import hljs from'highlightjs';
So it looks like:
<script>
import hljs from'highlightjs';
export default {
middleware: 'hasPermissions',
permissions: [ 'createPosts' ],
...
}
</script>
My plugin where I require vue2-editor:
import Vue from'vue';
import VueEditor from'vue2-editor';
Vue.use(VueEditor);
VueEditor component in my page:
<VueEditor
class="my-4"
v-model="content"
:editor-options="{ modules: { syntax: true } }"
placeholder="Post content" />
EDIT:
I've tried creating my own component and it shows the same error:
<template>
<v-layout
row
wrap>
<v-flex xs12>
<div ref="editor" />
</v-flex>
</v-layout>
</template>
<script>
import Quill from'quill';
export default {
data() {
return {
editor: null
};
},
mounted() {
window.hljs = require('highlight.js');
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [ 1, 2, 3, 4, false ]}],
[ 'bold', 'italic', 'underline' ]
],
syntax: true
},
theme: 'snow',
formats: [ 'bold', 'underline', 'header', 'italic' ]
});
this.editor.root.innerHTML = this.value;
}
};
</script>
I can successfully print hljs in console in development tools in my browser. What's wrong?
This one should be a better solution, works for me.
https://github.com/surmon-china/vue-quill-editor/issues/39
In fact, this is because quill internal self-closure caused by the
problem, the solution is as follows: modules.syntax from true to
replace a function:
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
editorOption: {
modules: {
syntax: {
highlight: text => hljs.highlightAuto(text).value
}
}
}
I struggled with this for a long time too and this answer worked for me!
// highlight.js component
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
let Highlight = {}
Highlight.install = function (Vue, options) {
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block) => {
Hljs.highlightBlock(block)
})
})
}
export default Highlight
// in main.js
import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)
I changed import 'highlight.js/styles/googlecode.css'
to import 'highlight.js/styles/monokai-sublime.css' seems to be a more popular and pleasing style.
you could also probably add a
hljs.configure({ // optionally configure hljs
languages: ['javascript', 'ruby', 'python']
});
to select certain languages, but I haven't tried.
Although I still haven't figured out how to change the background color. it shows up white in other places and black background in the quill window.