Vue and Javascript - vue.js

[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']
}
}
}

Related

CKEditorError: ckeditor-duplicated-modules while adding plugins to ckeditor

I'm trying to add text-alignment plugin to my ckeditor build in vue js.
Following is my code for the same::
<template>
<div>
<nav-bar />
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" class="full-width"></ckeditor>
</div>
<router-view class="fixed-center"></router-view>
</div>
</template>
<script>
import NavBar from "components/NavBar.vue";
import ClassicEditor from "#ckeditor/ckeditor5-build-classic"
import Alignment from "#ckeditor/ckeditor5-alignment"
export default {
components: { NavBar },
name: "app",
data() {
return {
editor:ClassicEditor,
editorData:'<p>Content of the editor.</p>',
editorConfig:{
plugins:[Alignment],
toolbar:['Heading','bold', 'italic','alignment']
}
};
},
methods: {},
};
</script>
I'm getting following error ::
CKEditorError: ckeditor-duplicated-modules

Can't resolve component import VueJS

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>

Vuejs - Failed to mount component: template or render function not defined

I am unsure what I am doing wrong. I get the below error:
error message in console:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VueChartjs>
<Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue
<App> at src\App.vue
<Root>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
// component: HelloWorld
component: require('../components/HelloWorld.vue').default
}
]
})
App.vue
<template>
<div id="app" class="container">
<img src="./assets/logo.png" class="logo">
<!-- chartjs -->
<div class="chartjsvue">
<Chatjsvue></Chatjsvue>
</div>
<div class="clear"></div>
<!-- chartjs -->
</div>
</template>
<script>
import Chatjsvue from '#/components/vueChartjs/Chatjsvue'
export default {
name: 'App',
components: {
Chatjsvue
}
}
</script>
Chatjsvue.vue
<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
import Chartjsvue from '#/assets/javascripts/chartjs'
export default {
components: {
'vue-chartjs': Chartjsvue
}
};
</script>
chartsjs.html
<div class="wrapper">
<vue-chartjs></vue-chartjs>
</div>
chartjs.js
file is rmpty- no code in the file
What is the error referring to and what needs to be done to resolve it?
I think the problem is your chartjs.js is empty. You need to do:
import template from './chartjs.html' // in your questions it's chartsjs.html, please help to correct it
export default {
template: template
}
Your chartjs.js file shouldn't be empty. It should be a Vue component with a template that can be rendered. Any javascript can be written within the script tags themselves.
The components object should only contain the list of vue components you need to use in the current component. And each component must have a template.
Thank you to everyone who contributed in answering. The js file should not be empty. This is the complete code to display all the charts for chartjs
main.js [src/main.js]
import Vue from 'vue'
import App from './App'
import router from './router'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'
Vue.config.productionTip = false
require('./assets/stylesheets/application.css')
require('./assets/javascripts/application.js')
require('./assets/javascripts/chartjs.js')
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App,
ChartJsPluginDataLabels
},
template: '<App/>'
})
App.vue [src/App.vue]
<template>
<div id="app" class="container">
<!-- chartjs -->
<div class="chartjsvue tab-content active" id="tab2">
<Chatjsvue></Chatjsvue>
</div>
<div class="clear"></div>
<!-- chartjs -->
</div>
</template>
<script>
import Chatjsvue from '#/components/vueChartjs/Chatjsvue'
export default {
name: 'App',
components: {
Chatjsvue
}
}
</script>
Chatjsvue.vue [src/components/Chatjsvue.vue]
<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
import Chartjsbarvue from '#/assets/javascripts/chartjsbar'
export default {
components: {
'vue-chartbarjs': Chartjsbarvue
},
mounted(){
console.log('Data is chartjs',this)
},
methods: {},
}
</script>
chartsjs.html [src/views/chartjshtml/chartsjs.html]
<div class="wrapper">
<div class="chart_header">chartjs bar chart</div>
<vue-chartbarjs></vue-chartbarjs>
</div>
chartjsbar.js [src/assets/javascripts/chartjsbar.js]
/*===================================================
File: Chartsjsvue.vue
===================================================*/
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
data () {
return {
datacollection: {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
label: '1st Dataset hello',
backgroundColor: 'rgba(52,65,84, 0.3)',
bordercolor: '#344154"',
hoverBackgroundColor: "#344154",
data: [40, 20, 12, 39]
},
{
label: '2nd Dataset',
backgroundColor: 'rgba(130,191,163, 0.5)',
bordercolor: '#82BFA3"',
hoverBackgroundColor: "#82BFA3",
data: [50, 70, 22, 55]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
display: false
}
}
}
}
},
mounted () {
this.renderChart(this.datacollection, this.options)
}
}

Global check user Logged In - NuxtJS

I config a global check user if LoggedIn or not to rendering components in NuxtJS but I cant do it. Please help me.
I write computed to wrapper components (layouts/default.vue)
~/layouts/default.vue
<template>
<router-view></router-view>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
computed: {
...mapGetters({
LoggedIn: 'authUser'
})
}
}
}
</script>
But I cant use it on children components / pages.
~/pages/index.vue
<template>
<div class="index-page">
<div class="" v-if="LoggedIn">
asdasd
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.LoggedIn)
// Result: Undefined
}
}
</script>

VueJs Material plugin not working properly

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>