I'm using the official highcharts-vue extension in my vue-3 project, and I have it working with the basic charts like line and area, but I'm having trouble getting a heatmap chart to work. This chart differs in that it needs to be included as an imported module, which is where I suspect my problem lies.
This is what I'm doing in the parent component:
<!-- Parent.vue -->
<template>
<HeatmapChart />
</template>
<script setup>
import HeatmapChart from 'src/components/charts/HeatmapChart.vue'
</script>
... and this is what's in the child HeatmapChart.vue file:
<!-- HeatmapChart.vue -->
<template>
<Highcharts :options="chartOptions" />
</template>
<script setup>
import Highcharts from 'highcharts'
import HeatMap from 'highcharts/modules/heatmap'
HeatMap(Highcharts)
const chartOptions = {
chart: {
type: 'heatmap',
...
}
...
}
</script>
Trying the above code doesn't render anything - the only feedback I get is the following console warning:
[Vue warn]: Component is missing template or render function.
at <Anonymous options=
I'm really not sure what's wrong, especially since I have other types of charts working. I'd sure appreciate any help I can get.
Here is an official heatmap demo for Highcharts Vue Wrapper you can base on:
https://codesandbox.io/s/vue-template-8z2f5
Related
I did encounter the problem on my local environment using pnpm create vite and that's all.
<script setup lang="ts">
// Comp.vue
const { value: val } = defineProps<{
value: string
}>()
</script>
<template>
{{ val }}
</template>
<script setup lang="ts">
// App.vue
import Comp from './Comp.vue'
</script>
<template>
<Comp value="A" />
</template>
Here is what the console printed and there's nothing on the page.
[Vue warn]: Property "val" was accessed during render but is not defined on instance.
at <Comp value="A" >
at <App>
It will throw the same error when trying to access undeclared variable in the template.
I've tried to reproduce it on Vue SFC Playground online, but actually I can't. It works pretty well on it, and here is the link.
I want to use vue2-editor (and some other packages) in my project, but use them local inside component or two. I followed this thread How to use plugin in only one component using Nuxt.js? but the solution doesn't help me, I see the following error
[Vue warn]: Failed to mount component: template or render function not defined.
Please suggest what I am missing?
Template:
<template>
<div>
<client-only>
<vue-editor v-model="newIdea.description" />
</client-only>
</div>
</template>
Components:
components: {
[process.client && 'VueEditor']: () => import('vue2-editor')
}
Is this somehow related that I should import {VueEditor} from 'vue2-editor' and not directly 'vue2-editor'?
I also tried to add .default but it didn't help.
Bottom line that import {VueEditor} from 'vue2-editor' is working and [process.client && 'VueEditor']: () => import('vue2-editor') is not (all the rest code is same, so definitely something wrong with the second import, but what? Or maybe I missed something?)
I get the following error when trying to import ForgotPassword.vue inside Login.vue. Tooltip.vue can be imported with no error though? Can't figure out what I'm doing differently. I have had similar problems before. Sometimes I get this error randomly (it works on and off):
[Vue warn]: Unknown custom element: <forgot-password> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Login> at src/components/register/Login.vue
<Register> at src/views/Register.vue
<App> at src/App.vue
<Root>
Login.vue:
<template>
<div id="login">
<tooltip />
<forgot-password />
</div>
</template>
import {
Tooltip,
ForgotPassword
} from '#/components'
export default {
components: {
Tooltip,
ForgotPassword
}
}
ForgotPassword.vue (not using props name but have tried that too. Didn't need it for other similar components that work):
<template>
<div id="forgot-password">
ouch..
</div>
</template>
components/index.js (for grouped imports):
import Tooltip from './Tooltip.vue'
import ForgotPassword from './ForgotPassword.vue'
export {
Tooltip,
ForgotPassword
}
You're exporting ForgetPassword and importing ForgotPassword. Change one of them
I am trying electron for the first time and I am blown away by it. I have hit a wall, though, when trying to use single file vue.js components using electron-forge. My problem is the following:
I create a project using the vue.js template and run it. Works and looks great. I have a single file page with an index file that looks like this:
<div id="test"></div>
</body>
<script>
import Vue from 'vue';
import Test from './test';
const app = new Vue(Test).$mount('#test');
app.text = "Electron Forge with Vue.js!";
</script>
So far, so good. It imports Test, which is a single file component and renders it.
Now, I would like to have other single file components nested in this main component. For example, I would like to have the following, in my app file called test.vue
<template>
<h2>Hello from {{text}}</h2>
</template>
<script>
import About from './About.vue'
export default {
components: {
appAbout: About,
},
data () {
return {
text: 'Electron'
}
}
}
</script>
Again, so far so good. I can run the app with no errors so the component is being imported.
Here comes my problem: if I now try to render the component using <appAbout></appAbout>, as I have done before in web apps with vue.js, I get the following error.
It basically says that I am not using a single root element in my component, which is really strange because my component looks like this:
<template lang="html">
<div>Hello from component</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
I am stuck. Can someone please help?
So I have tried a few different things with no success, like using or even as the component names.
I also have tried these two ways of starting the vue:
The way you get with electron-forge
const app = new Vue(App).$mount('#app')
and the way I learned
new Vue({el: '#app', render: h => h(App)})
Nothing seems to work...
Define your component like this :
export default {
components: {
'app-about': About
}
}
Then use it in template like this (with kebab-case) :
<app-about></app-about>
About your compiling template error you need to wrap everything in test.vue in a root element :
<template>
<div>
<h2>Hello from {{text}}</h2>
<app-about></app-about>
</div>
</template>
I am totally new to Vue.js and hence I feel the issue is very simple. Here is my Test.vue component:
<template>
<p>Hello Worldd</p>
</template>
<script>
export default {
name : 'test'
}
</script>
I am trying to display this "Hello Worldd" in another component called UserDevices.vue. Here is the contents of that file:
<template>
<div>
<test></test>
<p>test</p>
</div>
</template>
<script>
import Test from './Test'
export default {
name: 'UserDevices',
components: {Test}
}
I am getting an error says:
[Vue warn]: Unknown custom element: <test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <UserDevices> at src/components/UserDevices.vue
<App> at src/App.vue
<Root>
I am using webpack scaffold for vue as template. Isn't this the correct approach to do this?
You are using a .vue file, meaning that vue-loader is looking for a script section enclosed in <script> tags. But, because you are not closing the script tag with </script>, vue-loader will just ignore that section of the .vue file (without any warning).
The template of the Vue component will still get loaded, but the Vue instance's model (with all of its data properties, methods, component, etc.) will not. This is why Vue can't find the <test> component.