I generate a project using vue-cli and then run vue add vue-material.
Then I add MdButton and check in the browser
// work
<md-button class="md-icon-button">button</md-button>
Then I add MdIcon and check in the browser
// not work
<md-button class="md-icon-button">
<md-icon md-src="/assets/icons/svg/telegram.svg"></md-icon>
</md-button>
The compilation succeeds, but an error appears in the browser
Uncaught (in promise) The file /assets/icons/svg/telegram.svg is not a
valid SVG.
svg is definitely valid! How to fix?
I ran into this recently; as Leonardo mentioned it was due to the newly-added MIME type check. For some reason, my SVG file was being served up with Content-Type: text/html.
To fix it, I had to change my icons to use require, which (if I understand correctly) causes it to go through a different loader in Webpack which fixes the MIME type. (See here for a bit more info.) Using OP's example, I would change:
<md-icon md-src="/assets/icons/svg/telegram.svg" />
to
<md-icon :md-src="require('/assets/icons/svg/telegram.svg')" />
It seems an issue created because a mime type.
https://github.com/vuematerial/vue-material/pull/1942/commits/74c45f2150e7fc978e536dbc03549d0e8abff47c
Related
My vscode vetur plugin is marking the first line of vue files as an error. This is the code using a completely blank .vue file template
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
However the <template> line is marked as an error. Here is the error message:
Argument of type '{}' is not assignable to parameter of type 'new (...args: any[]) => any'.
Type '{}' provides no match for the signature 'new (...args: any[]): any'. Vetur(2345) [1,1]
I have confirmed that vetur is the only plugin doing anything on .vue files by disabling all other plugins
My vscode info is here:
Version: 1.47.2
Commit: 17299e413d5590b14ab0340ea477cdd86ff13daf
Date: 2020-07-15T18:22:15.161Z
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.4.0-42-generic
And I am using Vetur 0.25.0
I am completely stumped on what could be causing this. Not having intellisense and code completion due to this is driving me crazy
Disable experimantal template interpolation in veutr extenssion settings,
"vetur.experimental.templateInterpolationService": false
I did not spent time to figure out the root cause, but removing the .vscode folder solved it in my case.
This is an old issue, as you can see in this GitHub thread:
Vetur- Template interpolation error...
You can try one of the workarounds proposed there:
alukos commented on 27 Sep 2019
Or you can try to change Vetur config via settings or via vetur.config.js file
setting templateInterpolationService to false as #Jaideep Heer said.
"vetur.experimental.templateInterpolationService": false
Restart editor to take full effect, and the error should disappear.
Regards.
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
In my Vue project I have the following element:
<img
class="header__branding__logo"
src="#/assets/img/logo_desktop.svg"
/>
It is self-closing. Yet, ESlint throws this warning:
Disallow self-closing on HTML void elements (<img/>) vue/html-self-closing
Doesn't make any sense to me, am I missing something? What's the problem?
Your linter is just following the coding style you have configured it to follow. Your HTML is not invalid (although the / is considered unnecessary), but you have your linter configured to disallow that / on self-closing HTML tags, so that is why it is bringing it to your attention with a warning.
JQMIGRATE: Migrate is installed, version 1.4.1
revolution.extension.actions.min.js?ver=5.3.1.5:7
Uncaught TypeError: Cannot read property 'is_mobile' of undefined
Does anybody know what this issue could be? It is slowing down my site and I would like to fox it.
For anyone else seeing this bug, make sure "Defer Javascript Loading" under WP Admin -> Slider Revolution -> Global Settings is off
It's occurring because only the main slider revolution JS file loading is deferred, the plugins are not (at least not on 5.4.1), and the plugins were erroring from trying to access jQuery.fn.revolution.is_mobile when jQuery.fn.revolution hasn't been set yet
For me this problem is related to W3TC plugin, it happens when I minify the js files and if I uncheck minification of js, no more error is there.
You forgot to link 2 additional JavaScript files:
<!-- REVOLUTION JS FILES -->
<script type="text/javascript" src="../../revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="../../revolution/js/jquery.themepunch.revolution.min.js"></script>
Upon invsetigating 'mu is too short's answer to this question, I noticed that I get different behaviour in jsFiddle than in my local context for the exact same script. Any clues as to why that is?
Note:
I am not getting any javascript errors in Firefox's error console in the local context.
UPDATE:
I tried grabbing the HTML from fiddle.jshell.net/ambiguous/ZEx6M/1/show/light to a local file and loading that local file in Chromium browser and I got the following errors in the javascript console:
GET file:///css/normalize.css undefined (undefined) /css/normalize.css
GET file:///css/result-light.css undefined (undefined) /css/result-light.css
Resource interpreted as Script but transferred with MIME type application/empty jquery.scrollTo-1.4.2.js:-1
Resource interpreted as Script but transferred with MIME type text/plain jquery.viewport.js:-1
I can get rid of these javascript errors by downloading the files and modifying the <script> tags, but it doesn't solve the problem. The page still scrolls down to the very bottom. Also these errors appear even in the working (jsFiddle) version.
I also tried the same process in Konqueror. Result: the script does absolutely nothing.
Don't use separate files for CSS and javascript. Just bring everything into HTML file (using inline javascript and inline CSS) and you should be OK.
Or, run a web server locally to serve the javascript file (with the correct MIME type) and use relative paths to CSS.