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!
Related
Goal:
Use dynamic components to create custom reusable transition components for Vue V3.
vue2-transitions npm package uses the same method as below and it does not work with v3, So I decided to make a simple one for myself.
CustomTransition.Vue
<component
:is="group ? 'transition-group' : 'transition'"
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<slot></slot>
</component>
SomeOtherComponent.vue
<div>
<custom-transition>
<span v-if="show">This does not work.</span>
</custom-transition>
</div>
This does not work, I have no clue why. The <transition> element is rendered like this.
<transition
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<span>This does not work.</span>
</transition>
But,
When I rewrite the CustomComponent.vue like this.
<transition
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<slot></slot>
</transition>
It is working perfectly fine.
Edit
I've Added a JSFiddle, in case someone wants to try something out.
Finally found the solution from vue community.
link to working jsfiddle
For this component to work:
<component
:is="group ? 'transition-group' : 'transition'"
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<slot></slot>
</component>
Import the Transition and TransitionGroup components explicitly in the component and register them.
import { Transition, TransitionGroup } from 'vue'
export default {
components: {
Transition,
TransitionGroup,
},
data() {
return { show: false };
}
}
link to github issue in vue-next repo.
I am trying to create a basic site, where I need to select options from a dropdown menu. I am using the Select.vue from the vue-strap library to implement the same. However, the v-select component in not loading onto the html. Given below is the App.vue which inherits Select.vue from vue-strap:
<template>
<div>
<app-header></app-header>
<v-select v-model="selected" :options="['Vue.js','React']"></v-select>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/header.vue'
import select from '../node_modules/vue-strap/src/Select.vue'
import Footer from './components/footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'v-select': select,
},
data() {
return {
}
},
}
</script>
<style scoped>
</style>
Given below are the errors that I am getting onto the web console:
I am unable to resolve these errors. Any help is appreciated.
:options="['Vue.js','React']"
Above line can be a big problem, since you are passing the static data and not assigning any variable you don't have to use :
: this actually a binding operator you should only use this when you are binding option to some variable
For eg:
data(){
return{
options:[['Vue.js','React']]
}
}
now inside your vue file, you can add
<v-select v-model="selected" :options=options></v-select>
If you dont want to declare variable then you can remove :
<v-select v-model="selected" options="['Vue.js','React']"></v-select>
Always make sure whatever you are passing to the component is declared inside the data
If you want to use computed make sure you declare it upfront before using it
I'm currently using a v-textarea like this:
# Main.vue
v-textarea(ref="myTextArea")
I would like to put a transparent wrapper around it so I can use the same customized version throughout my app. I'm doing this:
# CustomTextarea.vue
<template>
<v-textarea v-bind="$attrs" v-on="$listeners"></v-textarea>
</template>
And I'm using it like this:
# Main.vue
CustomTextarea(ref="myTextArea")
The problem is that now my ref no longer points to the actual <textarea> (it points to the custom component) so something like this no longer works:
mounted() {
this.$nextTick(() => {
this.$refs.myTextarea.focus();
});
}
I don't understand the magic that Vuetify is using, but it does work in v-textarea. Is there a way to do the same in my customized component?
Okay, I think I found my answer here.
I just have to create the method and call it manually:
# CustomTextarea.vue
<template>
<v-textarea
v-bind="$attrs"
v-on="$listeners"
ref="input" //- <= add this
></v-textarea>
</template>
<script>
export default {
name: 'BaseTextarea',
methods: {
focus() {
this.$refs.input.focus(); //- <= call it here
},
},
};
</script>
I wonder if there is any way to automate this, but it works for now.
I have the following Vue component:
<template>
<div id="wrapper">
<div class="main-container">
<Header />
<router-view/>
<Footer/>
</div>
</div>
</template>
<script>
import './assets/js/popper.min.js';
// other imports
// ....
export default {
name: 'App',
components : {
Header,
Footer
},
mounted(){
// this is syntax error
import './assets/js/otherjsfile.js'
}
}
</script>
As is clear from the code snippet, I want to have the otherjsfile.js loaded in mounted() hook. That script file has certain IIFEs which expects the html of the web page to be fully loaded.
So how do I invoke that js file in a lifecycle hook?
This is the pattern I use. The example is importing a js file which contains an IIFY, which instantiates an object on window.
The only problem with this would occur if you want to use SSR, in which case you need Vue's <ClientOnly> component, see Browser API Access Restrictions
mounted() {
import('../public/myLibrary.js').then(m => {
// use my library here or call a method that uses it
});
},
Note it also works with npm installed libraries, with the same path conventions i.e non-relative path indicates the library is under node_modules.
I'm a little unsure of what your asking. But if you are just trying to include an external js file in your page, you can just use the script tag in your template and not have to put anything in your mounted function, like this:
<template>
<div id="wrapper">
<div class="main-container">
<Header />
<router-view/>
<Footer/>
</div>
<script src="./assets/js/otherjsfile.js"></script>
</div>
</template>
<script>
import './assets/js/popper.min.js';
// other imports
// ....
export default {
name: 'App',
components : {
Header,
Footer
},
}
</script>
Does this solve your issue?
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>