vue3: instant prototyping multiple root elements - vue.js

I try to use instant prototyping in Vue3, having installed #vue/cli and #vue/cli-service-global, got this error:
Failed to compile.
./Alert.vue
Module Error (from /usr/local/lib/node_modules/#vue/cli-service-global/node_modules/eslint- loader/index.js):
/home/xrfang/git/deployer/gui/src/components/Alert.vue
5:3 error The template root requires exactly one element vue/no-multiple-template-root
✖ 1 problem (1 error, 0 warnings)
As far as I know "template root requires exactly one element" is a requirement in Vue2, Vue3 should allow multiple root elements in one template?

As this answer suggests, wrap all the code inside the template tags in a single parent div.
Otherwise, to simply stop the error form displaying, Visual Studio Code (VSC) users can do the following:
Open "extensions" in VSC
Find and open "Vetur" extension by Pine Wu
Click the gear and select "extension settings"
Scroll down to "Vetur > Validation: Template" and uncheck the box
This is built upon #wittgenstein's comment above to "follow the steps in the guide: vuejs.github.io/vetur/guide/linting-error.html#linting"
This worked for me, but beware that I'm a novice and it's possible there are drawbacks to the above that I'm not aware of.

Related

How to update template views in Odoo while developing?

Is there an easy way for updating changes made in a template view when developing a module? Or what's the best approach for having a preview of what I'm coding?
I currently upgrade the module each time I change the template, but it costs me a lot of time.
If you run Odoo with the command-line --dev option, you have the following additional arguments:
all: all the features below are activated
XML: read template qweb from XML file directly instead of a database. Once a template has been modified in the database, it will be not be read from the XML file until the next update/init.
reload: restart the server when python file is updated (may not be detected depending on the text editor used)
qweb: break in the evaluation of qweb template when a node contains t-debug='debugger'
(i)p(u)db: start the chosen python debugger in the code when an unexpected error is raised before logging and returning the error.
See this Click Here
Thanks

Vue-Material navbar, Missing required prop: "to"

So the Vue-Material docs (https://vuematerial.io/components/bottom-bar) says it is possible to create a md-bottom-bar stuffed with md-bottom-bar-item, while being able to make md-bottom-bar-item act like a <router-link>
Their code can be seen right below "Seamless integration with Vue Router" (this is exactly what it's meant for by the way ^^), and my code looks like this :
<md-bottom-bar-item
id="messageRoute"
to="/Messages"
#click="stuff"
md-label="Notifications"
md-icon="message">
</md-bottom-bar-item>
<md-bottom-bar-item
id="settingsRoute"
to="/Settings"
#click="stuff"
md-label="Options"
md-icon="settings">
</md-bottom-bar-item>
These are tabs to a notifications list, and the settings page for my app.
The error I got when I click on an item is literally this (I got it 5 times though, beucause there's 5 items in my navbar) :
[Vue warn]: Missing required prop: "to"
found in
---> <MdButton> at src/components/MdButton/MdButton.vue
<MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
<NavBar> at src\components\NavBar.vue
<App> at src\App.vue
<Root>
I got the same error without the #click='stuff' by the way, nothing to do with it.... I guess...
Is it about Vue-Material#1.0.0 (the one I'm using) being in beta or ? It feels like I'm doing what is showed in the doc, I even copy-pasted it and changed things so it would fit in my app.
For now I just did a goTo(path) methods, that just do this.$router.replace(path), but the bottom bar is not sync with Vue's router, with the md-sync-route attribute, like so :
<md-bottom-bar md-sync-route>
<!-- stuff -->
</md-bottom-bar>
Not a critical problem, but damn, why Vue.js, why ??? ^^'
And, what a troll :
Ok, this is interesting.
As the issue you gave me pointed out, this might be a version problem, but my vue version is 2.9.2 (checked it with vue -V). Nevermind, I still ran npm update -g vue, and the answer I got from the terminal... well :
+ vue#2.5.11
updated 1 package in 0.626s
Now everything works fine (router, to, etc...).
But why though ? Does vue-material uses a slightly different vue, or there's some parts that are redefined, like router link's behavior on certain element like md-bottom-bar-item ?
And why npm install couldn't fix that ? Well anyway, now it works, and my last questions exists probably because this framework is a beta and few things have to be done... or because I'm starting to do stuff with npm etc ^^
If you know something it would be helpful for me to know, feel free to tell me, I'd be glad to hear...
It will also happen in 1.0.0-beta-8, but there seems to be a commit to fix
https://github.com/vuematerial/vue-material/commit/6860d3a004b09baef751724c0d9bf1ebdf92b752

Odoo 9 - cannot load custom module

I am brand new to odoo, just installed version 9 and made a module 'aidentest' using
.>>python odoo.py scaffold aidentest addons
That created the aidentest module in the addons folder. Uncommented everything in the autogenerated files
but when I went to check out my 'Hello World' page at
http://localhost:8069/aidentest/aidentest
I got a 404 not found
So I went to apps to try and load my module, but I could not find it.
Does anyone know what I need to do on Odoo 9 to load up and start coding my custom module?
Briefly: You have to activate developer mode by going to Top right menu>about>activate developer mode
I had basically given up, and was mindlessly clicking about when I hit the 'About' link on the generic-whiteguy dropdown. I had to actually stop thinking before I was able to locate the completely senseless place where they put the thing I need.
The About modal window popped up, and in it was an activate the developer mode button
Some things changed immediately, but I still couldn't find my custom module.
Then I walked away, came back and when I returned I had some auto-generated emails (new things had loaded - slowly). Did this mean that maybe my module had also become accessible? I checked, and sure enough, there it was.
ZERO DOCUMENTATION about this
Please check the config file.Then send the last error it has.

Can Webstorm play nice with Chai language chains?

I am using Mocha+Chai for a current Node.js project. My IDE is Webstorm 11.
Unfortunately, it seems Webstorm has no way of figuring out how language chains in Chai's should/expect are supposed to work. The following is commonplace:
I have tried explicitly setting both Chai and Chai-DefinetlyTyped as libraries for my project via Settings->Javascript->Libraries, but this does not resolve anything.
For the sake of tool support, I have considered dropping expect/should for assert instead, as this works perfectly. However, I very much prefer the style of expect/should, so it would be amazing to see a solution to this.
Problem is caused by weird dynamic way these chains are defined. As a workaround I can suggest using chai.d.ts:
Open "Settings | Languages & Frameworks | JavaScript | Libraries"
Click "Download..." button and select "TypeScript community stubs"
Find "chai" and click "Download and Install".

AIR custom transparent chrome problem Flash Builder 4.5.1

I'm re-creating an AIR app with FB 4.5.1. (I've started from scratch, having had trouble importing FB 4 projects).
In the app.xml I have the following defined:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
Having done this I still get a full window with titlebar, min, max, and close buttons.
what gives?
I believe you need to create a skin for the application.
This appears in Adobe's forum, and includes an FXP of a functional transparent app:
http://forums.adobe.com/thread/476699
Setting systemChrome & transparency along with "backgroundAlpha" to "0" would have helped in Flex 3.
But, skinning of components in Flex 4 i.e Spark components is little different and completely customizable.
Following are the steps you need to do make the window transparent.
Set systemChrome to "none" in the XML configuration file
Set transparent to "true" in the XML configuration file
Copy the skin code from <SDK_FOLDER>\frameworks\projects\airframework\src\spark\skins\spark\S parkChromeWindowedApplicationSkin.mxml and paste in a new MXML file.
Set the "alpha" property of "backgroundRect" object inside the skin file to "0".
Assign the newly created skin as the "skinClass" for "s:WindowedApplication" object
Please import the attached FXP file using "File->Import Flex Project" menu and have a look at the code to make it much more clear.
First, I discovered it is easier to interact with app.XML by opening it via "Open With -> Text Editor".
Second, and this is really embarrassing, I had simply failed to remove the comments bracketing
was:
<!-- <systemChrome>none</systemChrome> -->
<!--<transparent>true</transparent>-->
should have been:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
...duh! I knew better, but...
Lastly, for a completely chromeless app, add
showStatusBar="false"
to the app header.
that's it!