We Keep Coding

How to get an value from Child component to Parent on nuxt.js?

I am stuck trying pass data from Child A ($emit) component to Parent and from Parent to Child B (props).
Using nuxt.js I have:
layouts/default.vue
This default template will load a lot of components.
Those components will be used or not based on variable from child, the variable will set the v-if directive.
The children are the pages like:
pages/blog/index.vue
pages/about/index.vue
...
The goal is the Child set on Parent what components would be used, the flag can change anytime, the user can choose what will be rendered on admin area.
I have tried use local computed methods on child component, and vuex, no luck with both.
The idea on layouts/default.vue.
<template>
<div>
<TopBar v-if=showTopBar></TopBar>
<Nav v-if=showNav></Nav>
etc...
<nuxt />
</div>
</template>
<script>
import TopBar from "../components/TopBar";
import Nav from "../components/Nav";
etc...
export default {
data() {
return {
showTopBar: false,
showNav: false
etc...
};
},
}
</script>
On child already have use the $emit but no luck.
Child on this situation are pages, and the layout of those pages will be defined by variable from a fetch on the API, user can change the layout anytime.
The goal is have someting like double way between Child Components, example:
Calling route /blog will call pages/blog/index.vue
This would send to layout/default.vue using $emit what components would be rendered (choosed from user in admin area and fetched from API) and the component ID. (example: {topBar: true, topBarID: 2})
On layouts/default.vue after get the $emit from pages/blog/index.vue I would have for example TopBar false, and then not render it, or have received true with an ID, this Id will be send to TopBar as prop for render the customized TopBar made by user on Admin area.
Would be possible someone show an example how to get the pass those data for this specific cenario please?
(Does not matter if using local variables from the Child component or vuex, just looking for an example how to get the contents of variable from Child instead an plain object or undefinied object).
PS.: If there an better approach to deal with dynamic layouts, I am accepting suggestions too.
PS2.: I know I would use specific template per page, like layout/blog and layout/contact, etc... but since the idea is make an CMS, this would not fit on this scenario, I mean, from the admin area user should be able to create pages enabling or disabling components through an page Wizard (the idea is getting something like Wix, every component customization from user will be stored in the database using an Id, and on layouts user choose the previous components mounting the page, in the end all call will be made using the ids of those), and not need to add specific layouts programing, because this the Idea of set all possible components and layouts in layout/default.vue sounds at this moment an better approach, but if is not, I would love see other ways to get same goal.

The correct way to do it would be:
<child-component-1 :showNav.sync="showNav">
And within the child component you would update that by doing:
this.$emit('update:showNav', value)
The parent would define this property:
data() {
return {
showNav: default_value
}
}
You would have to pass that variable to every child component. Every child component would have to define it as a property.
Perhaps a better way to do it would be to instead create a simple store within nuxt and use that to house the settings.

VueJS - Load separate component into vue instance

At my job I'm currently in the progress of a redesign of our web platform, including moving a lot of old javascript / jquery into VueJS.
I have a global.js file which holds our Vue components and we have a vendor.js which holds Vue, Axios, Vuex,...
Now we have a text editor on our site and this editor has a Vue version. The problem is that this text editor is pretty big, almost 500kb minified for production. So I've created a separate component in a separate file for this editor, since we only need it on two pages.
Now, since my global Vue takes up the whole page I cannot insert the text editor into it because you can't put a Vue instance inside another Vue instance.
Is there a way that I can keep the editor as a totally separate file but somehow use the global Vue instance when it gets loaded on a page?
I've searched for quite a bit but haven't come across this problem anywhere. Maybe it's not possible to do this.

Try loading TextEditor.vue asynchronously.
new Vue({
// ...
components: {
TextEditor: () => import("./TextEditor.vue")
}
})
Reference.

You can modify the CSS for the editor to position:fixed or position:absolute and put it inside your app component. Then use a v-if to toggle visibility.
You can also wrap your editor using a 3rd party dialog component to wrap it into a modal popup window.
Another unrelated suggestion is to use lazy loading if the component has a large size.

You can merge multiple Vue files together through imports and the components property within a .vue file.
<template>
<div>
<TextEditor></TextEditor>
</div>
</template>
<script>
import TextEditor from 'path/to/TextEditor.vue';
export default {
name: 'Main',
components: {
TextEditor
}
}
</script>
Furthermore, you can set this to be a dynamic import. If your project was set up with vue-cli, you should already have webpack installed. If that's the case then you can also set the dynamic import to have one of two types: prefetch or preload. Essentially prefetch downloads files when the app is idle and preload downloads it in parallel to the main component. Implementing either of those aspects ends up looking like this:
export default {
name: 'Main',
components: {
TextEditor: import(/* webpackPrefetch: true */ 'path/to/TextEditor.vue')
/* OR */
// TextEditor: import(/* webpackPreload: true */ 'path/to/TextEditor.vue')
}
}

You should take a look at splitting your bundle into chunks: https://webpack.js.org/guides/code-splitting/
Only load your text editor chunk on pages that require it.

You can put a Vue instance inside another Vue instance.
Let's say I have the following HTML
<div id="main-app"></div>
new Vue({
el: "#main-app",
template: `<div>
This is my main application which has an editor div
<div id="editor"></div>
</div>`
});
new Vue({
el: "#editor",
template: `<div>
This is my editor component
</div>`
});
The final resulting HTML would be
<div>
This is my main application which has an editor div
<div>
This is my editor component
</div>
</div>

Excluding Resuable global components from another component

So I have many components which have a sidebar and navbar code written in all of them except one component. So I did the reasonable thing and made both of them(sidebar and navbar) separate components.
Now if I import them in App.vue, it shows in all the components including the one I don't need them in.
How do I go about it? Btw, the App.vue is my central point and where I'm loading router-view from

As answered by #Badgy
Make a v-if="$route.path !== 'yourpathwhereyoudontwantthenavbar
Example:
// this will not display the sidebar on the register page
<Sidebar v-if="$route.path !== '/register'" />
Another Alternative by myself:
Define where you want these components to appear in the meta options of your route objects https://router.vuejs.org/guide/advanced/meta.html. It's more or less just a way to attach arbitrary information which you can fetch from the current route to determine e.g. your layouting
const router = new Router({
routes: [
{
path: '/users',
name: 'users',
component: Users,
meta: { sidebar: true, navbar: true },
},
},
})
// This will make the sidebar appear in the user page
<sidebar v-if="$route.meta.sidebar">
You can do <sidebar v-if="!$route.meta.sidebar"> if you don't want it just in 1 component

Vue.js transition between items created with v-for

I'm cloning a flash app (http://bqgh6e.axshare.com/module.html) using vue and I need to create transitions between items created with v-for.
I've got transitions working between different components on my App.vue https://github.com/alansutherland/BodyGuard/blob/master/src/App.vue
However, within Module1.vue I'm generating slides using v-for https://github.com/alansutherland/BodyGuard/blob/master/src/components/Module1.vue
Is it possible to dynamically create router links for each item generated within the module and transition to them from one another?
Here is a hosted demo of the project so far:
https://bodyguard-9c7b0.firebaseapp.com/module-1
My current solution is to wrap the slides within a large parent and navigate them as a carousel. Not sure if this is a good solution for optimization and it doesn't feel like the vue way to do things.
I'm also running in to trouble trying to $emit back to App.vue, I'm able to pass slidePosition as a prop to the child using:
<router-view :slidePosition="slidePosition" class="view"></router-view>
In my module I try to $emit back using this:
<span v-on:click="increment" v-on:increment="incrementPosition">Start</span>
methods: {
increment: function () {
this.slidePosition += 10
this.$emit('increment')
}
}
This is based off this SO answer vuejs update parent data from child component. Transitioning between slides using the router would be a far neater solution.
Or do I not even need to use the router? do I just use transition-groups?
https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions

I found a really simple solution based on this demo http://matthiashager.com/blog/image-slider-vuejs-tutorial
Rather than use v-for I just change the slide content by incrementing my slidePosition which I then use to call each item within my slide object. As a simple example, say my slides object was this:
slides: [
{title: 'Slide One'},
{title: 'Slide Two'},
{title: 'Slide Three'},
{title: 'Slide Four'}
]
and within data I've set slidePosition: 0
I can then increment the position using a button
<button v-on:click="incrementPosition">Next</button>
then within my methods:
incrementPosition: function () {
this.slidePosition = this.slidePosition + 1
}
And finally in my template:
<h3>{{slides[slidePosition].title}}</h3>

Toggle state from another component

I'm pretty new to React and Redux so I may be doing this completely the wrong way, in fact judging from a few other answers to similar questions on here I suspect I'm doing quite a lot wrong.
I've got a button in my 'Layout' component which adds a class to a div, this class comes from a state. The button is a toggle and will turn the state & class on and off (this will result in making a menu appear and dimming the rest of the page).
However I also want any interaction with the 'Nav' component (which lives inside a 'Header' component which in turn lives in 'Layout') to also toggle the state & class (so clicking a link collapses the menu). In jQuery/VanillaJS this was incredibly easy but I can't seem to work out the React/Redux way of doing this.
Layout Component: https://pastebin.com/WzpbeSw7
Header Component: https://pastebin.com/c34NFtUx (probably not relevant but here for reference)
Nav Component: https://pastebin.com/EsJDuLQc

By using redux :
You can have a state like toggleBlaBla : "show" . If you connected your react component to state of redux by using react-redux , whenever you dispatch an action for changing toggleBlaBla to "hide", your connected component will rerender.
By using only react :
If you want two components to change some ui state by some events, it is a good idea to put them in a container component, so that whenever your state changes these two components rerender with your changed state passing to both components.

One way to achieve this is to do the following:
In Layout component:
On line 26 change <Header / > to: <Header handleNavClick={this.toggleNav.bind(this)} / >
In Header component:
On line 10 change <Navigation position="header" /> to: <Navigation closeNav={this.props.handleNavClick.bind(this)} position="header" />
In Navigation component:
On line 16 change return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li> to: return <li key={item._id}><Link to={item.slug} onClick={this.props.closeNav.bind(this)}>{item.name}</Link></li>
Passing the props in this way will allow you to reference reference the toggleNav function inside of Layout and then will update the state accordingly.
*** Note, you may get a binding error such as React component methods may only be bound to the component instance..
If this happens, you will need to define a function on the Navigation component instead of using this.props.closeNav directly. You would need to create a function in Navigation like this: closeNav() { this.props.closeNav.bind(this) }. Don't forget to update the function on the <Link /> component to this.closeNav.bind(this)