First of all, I wrapped VueEditor component.
WYSIWYG.vue
<template>
<VueEditor
v-bind="$attrs"
v-on="$listeners"
/>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
components: {
VueEditor
}
}
</script>
Right now everything works fine. According to the documentation (Modular Version), I should be able to do something like this.
<template>
<VueEditor
v-bind="$attrs"
v-on="$listeners"
/>
</template>
<script>
import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'
export default {
components: {
VueEditor
}
}
</script>
<style>
#import '~vue2-editor/dist/vue2-editor.css';
#import '~quill/dist/quill.core.css';
#import '~quill/dist/quill.bubble.css';
</style>
But this is the output.
What am I doing wrong?
Related
[1]Can not import?
I wanna link a js file with Vue imported on it to a html.
Is seems the html is linking correctly the script.js under the script tag but the javascript file cant understand Vue so the html cant do so.
Im very inexperienced, it is basic help.
import Vue in index.html
<head>
<script type="importmap">
{
"imports": {
"vue": "/lib/vue.esm.browser.js_2.6.11/vue.esm-browser.js",
"vue-multiselect":"/lib/vue-multiselect/vue-multiselect.esm.min.js",
"SingleFileComponent":"/js/SingleFileComponent.js",
"MultiSelectComponent":"/js/MultiSelectComponent.js"
}
}
</script>
</head>
create anchor in index.html
<div id="app">
<multi-select-component></multi-select-component>
</div>
<div id="single">
<single-file-component></single-file-component>
</div>
<script type="module">
import { createApp } from 'vue'
import VueMultiselect from 'vue-multiselect'
import SingleFileComponent from "SingleFileComponent";
import MultiSelectComponent from "MultiSelectComponent"
createApp({
components: {
MultiSelectComponent
}
})
.component('multiselect', VueMultiselect)
.mount('#app')
createApp({
components: {
SingleFileComponent
}
})
.mount('#single')
</script>
create single-file-component in SingleFileComponent.js
export default {
template: `
<div>
<h1>Single-file JavaScript Component</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the component'
}
},
}
create multi-select-component in MultiSelectComponent.js
export default {
template: `
<multiselect v-model="value" :options="options"></multiselect>
<label>{{ value }}</label>`,
data() {
return {
value: null, options: ['list', 'of', 'options']
}
}
}
I'm trying to use MainNavbarButton within MainNavbar. I imported the component, but get the error of "Module not found: Error: Can't resolve './components/MainNavbarButton.vue'" All the solutions I found seem to stem from a spelling mistake, but I'm pretty sure that's not the case here.
MainNavbar.vue
<template>
<div id="navbar">
<MainNavbarButton />
</div>
</template>
<script>
import MainNavbarButton from './components/MainNavbarButton.vue'
export default {
name: 'MainNavbar',
components: {
MainNavbarButton
}
}
</script>
MainNavbarButton.vue
<template>
<h2>{{ title }}</h2>
</template>
<script>
export default {
name: 'MainNavbarButton',
props: {
title
}
};
</script>
App.vue
<template>
<MainNavbar/>
</template>
<script>
import MainNavbar from './components/MainNavbar.vue'
export default {
name: 'App',
components: {
MainNavbar
}
}
</script>
I created a dashboard.vue component and I imported table.vue component into it but the table.vue doesn't appear in my web page and in the vue.dev tools.
When I import the table.vue in app.vue there's no issue.
Below my files.
Thanks in advance!
//dashboard.vue
<template>
<div>
<table></table>
</div>
</template>
<script>
import table from "./table";
export default {
name: 'Dashboard',
component: {
table,
}
}
</script>
<style >
</style>
//table.vue
<template>
<div>
<p>Test</p>
</div>
</template>
<script>
export default {
name: 'Table',
}
</script>
You cannot name components the same as reserved HTML elements. Change it to my-table.
You'll need to map it:
components: {
'my-table': table,
}
I am coming from an angular mindset and now I am trying to learn vue.js. I am using webpack and I have the following three .vue classes.
CounterDisplay.vue, IncrementButton.vue, andApp.vue. I want to increment thecountvariable but all it does isconsole.loghow many times I pressed the button. I am trying to figure out how child to parent and parent to child work in vue. Then I need to figure out the correct pattern to use vue in a very large application. In angular you have amoduleand in there you put your components and services etc. How doesvue` do this?
CounterDisplay.vue
<template>
<div id="#counterDisplay">
{{count}}
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
}
}
</script>
<style scoped>
</style>
IncrementButton.vue
<template>
<button #click.prevent="active">+1</button>
</template>
<script>
export default {
methods: {
active () {
console.log('+1 Pressed')
}
}
}
</script>
<style scoped></style>
App.vue
<template>
<div id="app">
<h3>Increment:</h3>
<increment></increment>
<h3>Counter:</h3>
<counter></counter>
</div>
</template>
<script>
import Counter from './components/CounterDisplay.vue'
import Increment from './components/IncrementButton.vue'
export default {
components: {
Counter,
Increment
}
}
</script>
<style>
</style>
This is the output:
As you said:
. I am trying to figure out how child to parent and parent to child work
This is how you do it:
Set up a counter data property in App.vue
Emit an event using vm.$emit() in IncrementButton.vue component on every button click
Set up an event listener on this component increment and execute the method whenever this event is emitted
In the event call back method increase the counter by 1
Send the counter property as a prop to **CounterDisplay.vue
App.vue*
<template>
<div id="app">
<h3>Increment:</h3>
<increment #btn-clicked="increaseCounter"></increment>
<h3>Counter:</h3>
<counter :counter="counter"></counter>
</div>
</template>
<script>
import Counter from './components/CounterDisplay.vue'
import Increment from './components/IncrementButton.vue'
export default {
data(){
counter:0
},
components: {
Counter,
Increment
},
methods:{
increaseCounter(){
this.counter ++;
}
}
}
</script>
<style>
</style>
IncrementButton.vue
<template>
<button #click.prevent="active">+1</button>
</template>
<script>
import {EventBus} from './path/to/main.js'
export default {
methods: {
active () {
console.log('+1 Pressed')
//emitting an event
this.$emit('btn-clicked');
}
}
}
</script>
<style scoped></style>
CounterDisplay.vue
<template>
<div id="#counterDisplay">
{{counter}}
</div>
</template>
<script>
export default {
props:['counter'],
data () {
return {
}
},
}
</script>
<style scoped>
</style>
--------------------
Since the two components are non parent-child components the simple scenario would be using an EventBus
Declare an EventBus which is nothing more than an empty Vue instance in your main.js file
export const EventBus = new Vue();
The only focus of this empty vue instance is to listen and respond to events from components
IncrementButton.vue
<template>
<button #click.prevent="active">+1</button>
</template>
<script>
import {EventBus} from './path/to/main.js'
export default {
methods: {
active () {
console.log('+1 Pressed')
//emitting an event
//Syntax is EventBus.$emit('event-name', eventData);
EventBus.$emit('btn-clicked', 1);
}
}
}
</script>
<style scoped></style>
Now setup an listener for btn-clicked event in created hook of 8*CounterDisplay.vue**
<template>
<div id="#counterDisplay">
{{count}}
</div>
</template>
<script>
import {EventBus} from './path/to/main.js'
export default {
data () {
return {
count: 0
}
},
created(){
EventBus.$on('btn-clicked', (eventData) => {
this.count = this.count + eventData;
});
}
}
</script>
<style scoped>
</style>
Note: As you want to know the correct pattern for a large app, I would recommend using vuex
I want to use the vue-material package in my app. I've everything as the docs suggest but my components are not being rendered properly. I am using VueJs 2.x.x
Here is my main.js file:
import Vue from 'vue'
import App from './App.vue'
import state from './state.js'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial)
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
})
new Vue({
el: '#app-container',
components: {
App
}
})
And here is App.vue:
<template>
<div id="app">
<div>Current page: {{currentView}}</div>
<img src="./assets/logo.png">
<transition name="fade" mode="out-in">
<component #stateCPchanged="changeView" v-bind:is="currentView"> </component>
</transition>
</div>
</template>
<script>
import numberPage from './components/NumberPage.vue'
import redirectPage from './components/RedirectPage.vue'
import state from './state.js'
export default {
data () {
return {
currentView: state.currentPage
}
},
components: {
numberPage: numberPage,
redirectPage: redirectPage
},
methods: {
changeView() {
this.currentView = state.currentPage
}
}
}
</script>
<style>
...
</style>
And the page using the plugin:
<template>
<div v-md-theme="'default'"
<md-button class="md-raised">Default</md-button>
</div>
</template>
<script>
import state from '../state.js'
export default {
data(){
return{
message: "this.clientId"
}
},
methods:{
goOtp(){
},
goRedirect(){
state.currentPage = 'redirectPage'
}
}
}
</script>
<style>
....
</style>