Develop Reference

(Codesandbox, Vue) 'Property or method "children" is not defined on the instance but referenced during render.'

I am currently building a State Manager, which can be integrated into multiple Frontend Framework, including Vue.
To demonstrate the usage of the State Manger in Vue, I created a simple codesandbox.
Because it is always nice to have a live code example, which can be promoted in the Readme.
But somehow, I am always getting this (see below) error in the codesandbox.
[Vue warn]: Property or method "children" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
The above error only occurs in the codesandbox showing the editor + preview.
Locally or in a separate tab (which displays only the preview)
it works as expected (without error).
Codesandbox (Error):
https://codesandbox.io/s/agilets-first-state-i5xxs?file=/src/main.js
Codesandbox Preview on separate tap (no Error):
https://i5xxs.csb.app/
Local Project (no Error):
https://github.com/agile-ts/agile/tree/master/examples/vue/develop/my-project
I have no idea what I am doing wrong.
But it has something to do with my State Manager,
since the default vue codesandbox works fine.

Ignore that error. This is a bug in Codesandbox and not directly caused by your own code. One of their developers commented on Apr 13 that the issue is low priority, so it likely won't be fixed anytime soon.

ESLint rule to ensure JSX text nodes are not mixed with other nodes

On my React application, I noticed multiple errors on production reported by Sentry. It was mostly: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node..
I discovered that these errors are actually caused by Google Translate that is messing with React DOM: https://github.com/facebook/react/issues/11538
So now, if I want my React application to be more resilient to Google Translate and other plugins that changes the page DOM, I would like to ensure that text nodes are never mixed with other nodes. For that I am looking for an ESLint rule that would:
Raise an error for this code:
<div>
{condition && 'Welcome'}
<span>Something</span>
</div>
And instead, accept the following code:
<div>
{condition && <span>Welcome</span>}
<span>Something</span>
</div>
Is there already an ESLint rule that does that? If no, do you have any clue to build this rule?

Vue.js and svg modules and mismatched nodes

Let's say I have two vue modules:
parentModule.vue
<template>
<svg>
<child-module v-for="i in ['a', 'b']" :key="i"/>
</svg>
</template>
...
childModule.vue
<template>
<g>
//...some valid svg content
</g>
</template>
...
Now, it works decently. The issue is, unfortunately, that in development mode I get a warning about mismatched nodes - apparently Vue doesn't like using svg elements. I have a feeling it messes a bit with some things in development during re-rendering. Is there any way around this?
Edit
After dabbling for a bit it seems the issue might be with something different - on a line of how canvas property is being updated. As I couldn't replicate it in CodePen (I guess version of vue might have a different logging level?), here is a working example: https://github.com/msdsk/so_svg_example

In your example the problem is due to the usage of Math.random() in pages/index.vue (and has nothing to do with SVG). As a result the server-side rendered page doesn't match the virtual DOM produced on the client-side, leading to the observed warning during hydration.
From the Vue SSR documentation:
Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.
...
In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch.

Use Knockout.js on the same page as Vue.js

Hi I have an existing project which uses alot of knockoutjs.
Im attempting to add vuejs to the project and slowly move everything over to vuejs in time.
Ive added vue to a wrapper element which contains the whole page and created a single vue component.
My aim is to use that component anywhere on the page but not break my knockout code.
The problem im having is my knockout bindings are not being defined when I apply the vue el tag to the main element that wraps the page and the ko.applyBindings scripts. (vue elements work ok but all ko scripts throw an error )
I am using complied templates and the vue-cli with webpack-simple.
Im pretty new to vuejs but I think this is happening because vue is trying to parse the knockoutjs code inside the page html
console error:
ReferenceError: Unable to process binding "slideVisible: function(){return !isShowBillingForm() }"
Message: isShowBillingForm is not defined
at slideVisible (eval at parseBindingsString (knockout-3.3.0.js:61), <anonymous>:3:65)
at init (slidevisible.js:15)
at knockout-3.3.0.js:65
at Object.u (knockout-3.3.0.js:35)
at knockout-3.3.0.js:65
at Object.o (knockout-3.3.0.js:10)
at g (knockout-3.3.0.js:65)
at h (knockout-3.3.0.js:63)
at k (knockout-3.3.0.js:63)
at h (knockout-3.3.0.js:63)
If anyone could help me that would be amazing
(Ive also added the vue cdn to the header and added in vue markup into the page directly and their are no conflicts) so I guess its something to do with the compiled templates?

I've added Vue to a wrapper element which contains the whole page and created a single Vue component.
I believe that's the issue. When migrating to VueJS from legacy Knockout you will have to pick and choose where you want to use Vue.
The way Vue parses the DOM is very different compared to Knockout. It uses a concept of virtual DOM, so the final DOM output is only valid HTML and no framework specific markup. That inherently will break any KO code bound to it.
So the approach I'd recommend is finding pieces of the app you want to convert to Vue and then instantiate Vue inside a Knockout VM (or with plain JS) like this:
import Vue from 'vue';
import MyVueComponent from 'libs/components/my-component.vue';
const propsData = {my: props};
const myComponent = Vue.extend(MyVueComponent);
new myComponent({el: '#some_element', propsData: propsData})
Also important, make sure you tell KO not to process #some_element that Vue is bound to by using the stopBinding handler as described here.
Hope that helps!

[Vue warn]: Unknown custom element: <testimonial-photo-inner>

I have just installed VueJS on my website and I'm getting tonnes of console errors like the one above. I am not trying to create any Vue components (yet) but my website does contain a number of custom HTML tags.
Does Vue treat any custom HTML tage (e.g. not one in the HTML spec) as something it needs to compile and will it always complain about tags it doesn't recognise?
Is it possible to switch theses warning off?
Please note: This is not a duplicate of Vue js unknown custom element
The user there is actually trying to create a Vue component.

You can use the ignoreElements configuration parameter to have Vue ignore elements that it should not touch.
So in your code you would likely want to add:
Vue.config.ignoredElements = [
'testimonial-photo-inner'
]
And include any other tags you might be using that you do not want Vue to touch.