i know this has been asked before, but none of the solutions are working for me.
npm is not giving me any errors and if i change the path or mess with the code in any other way, npm will complain. so i am fairly certain that the code is correct, but maybe missing something. the component is just not shown.
from some online tutorial i got the following test component:
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
i would like to use this in another component like this:
<template>
<testcomponent></testcomponent>
</template>
<script>
import testcomponent from "./testcomponent.vue";
export default {
name: "whatever"
,components:
{
testcomponent
}
}
i also tried loading the component like this:
import testcomponent from "./testcomponent.vue";
Vue.component('testcomponent', testcomponent);
and like this:
Vue.component(
'passportclients',
require('./components/passport/Clients.vue').default
);
i don't think there is an issue with importing the file as it is also not working when i place the component definition into the same file.
thank you very much for any help!
in your testcomponent.vue just paste this code
<template>
<div>
<h1>
This is coming from component
</h1>
</div>
</template>
delete everything else
Related
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 have just started with Vue and am having an issue where the component isn't rendering for me.
<template>
<div>
<GalleryCollectionBlueBottles />
</div>
</template>
<script>
import GalleryCollectionBlueBottles from '#/components/collections/GalleryCollectionBlueBottles.vue'
export default {
name: 'GalleryCollections'
}
</script>
When I inspect the page in a browser all I see is an element with the component name, not the contents of the component as usual.
The component above is called GalleryCollections and the component I'm importing is called GalleryCollectionBlueBottles.
Hope someone can help, also hoping this is something simple I've overlooked :)
You need to also declare the component inside your script tag within the keyword components{ ... } like;
<script>
import GalleryCollectionBlueBottles from '#/components/collections/GalleryCollectionBlueBottles.vue'
export default {
name: 'GalleryCollections',
components: {
GalleryCollectionBlueBottles
}
}
</script>
I am trying to use Bootstrap 4 with a VueJS Single page app but can't figure out how to get the tooltip to work. (Note: I know there is a Bootstrap-vue project but I don't want to use that one...yet)
Here's my simple test:
<template>
<div>
<span id='tip'>Test link</span>
</div>
</template>
<script>
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/js/dist/popover.js';
import 'bootstrap/js/dist/tooltip.js';
export default {
name: 'test',
created: function() {
$('#tip').tooltip({
title: 'hello world'
});
}
};
</script>
But, that just renders the link and no tooltip.
There is no error in console. So, what am I doing wrong here?
As I answered in Discord:
The solution is to use mounted instead of created so you can access the dom for that kind of method to work (basically).
More on Vue lifecycle hooks here
It turned out I need to use the mounted property, not the created property. Solved!
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'm using Vue and Brunch in a small project, today I decide to add Vueify to make my components more concise.
But they are always seen has fragment instance so they are not rendered.
<template lang="pug">
div.sticker-container.sticker-xs-container.nav-top-sticker-animate#btn-about(v-bind:href="link")
span.sticker.sticker-xs.sticker-dark
span.sticker-txt.sticker-xs-txt(v-html="locales.btns.open")
span.sticker.sticker-xs.sticker-over.sticker-over-xs.sticker-light(v-show="opened")
span.sticker-txt.sticker-xs-txt.sticker-light-txt(v-html="locales.btns.close")
</template>
<script>
export default {
data(){
return {
disabled: false,
link: '#'
}
}
}
</script>
To use Vueify I simply add Vue-brunch to my project and I call this vue component like this:
import bar from './foo/bar'
Vue.component('sticker-bar', bar)
So, what i'm doing wrong ?
Try adding a surrounding div within your template. Like so:
<template>
<div>
<content></content>
</div>
</template>
Most times this will solve the fragment instance error.
For more detailed info: https://vuejs.org/guide/components.html#Fragment-Instance
I hope it helps!