I am trying to download Vue Element.io locally. If I am using example from CDN all works. But if I am linking to component placed on file system I am getting error.
<script src="js/index.js"></script>
Instead of:
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
I am getting error:
Unknown custom element: <el-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I tried to link with all package and part of it (single element like button). Thу error is same.
Related
Due to CSP Requirements I have had to convert a static vue application within the Vue 2 CLI environment.
After reading a lot of online documentation I am aware that for CSP compliant vue you need to use Render functions and a runtime version of Vue.js
My problem is that after converting my old static vue application to the Vue CLI build process I am still getting a 'unsafe-eval' is not an allowed message. I am not sure why this is the case, due to Vue 2's cli build process apparently using the CSP compliant runtime vue version, unless otherwise specified in the config file for webpack.
The specific code causing the CSP error (there is only one instance of it) is found in the built/output vendor.js file. The code causing the issue is:
function Ts(t, e) {
try {
return new Function(t)
} catch (n) {
return e.push({
err: n,
code: t
}), D
}
}
I have looked far and wide to figure out why this non CSP compliant code is appearing in Vue's built vendor.js file. Any advice would be great. I have read all of Vue's main documentation on CSP, and should re-iterate that I used Vue 2 CLI for the build and conversion of the static app.
For any other poor soul who have gone down the rabbit hole of Vue.js static to non-compiled CSP conversion, these 2 steps solved my issue:
Manually change csp\build\webpack.base.conf.js '$vue' property to the following:
Click to see image
In your main.js file change vue instantiation to the following pattern, this is needed so the component will mount correctly with the runtime build Click to see image
Vuejs and Alpine js uses similar directive #
So i resorted to usin x-bind: x-on:click instead of using the # directive when writing AlpineJs in the same project as VueJs.
This has been working fine until
There's a need to do a loop.
Going through alpineJs docs
There are two rules worth noting about x-for:
x-for MUST be declared on a element
That element MUST have only one root element
So when i do
<template x-for"(option, index) in options) x-bind:key="index">
//the rest of the code
</template>
I keep getting Alpine expression error: option is not define.
Any idea on how to resolve this?
I'm currently trying to use a custom component (https://github.com/wolfika/vue-playing-card) in my demo application built with Vue CLI.
First I've tried in a JS Fiddle (https://jsfiddle.net/xwb59m8g/1/) and everything works as expected just by importing the <script> (as explained in the Github "Browser" section) and using the <vue-playing-card> custom component. Than I've tried including the component in my Vue CLI app by following the instruction on the Github page under the "Bundler (Webpack, Rollup)" section and everything works.
My problem is that, for some reasons that I will explain if you need to know, I have to include this component using the <script> tag, as in the JS Fiddle, and not with the "Bundler (Webpack, Rollup)".
I tried including the <script> tag at the bottom of my index.html file but when I try to include the custom component in my Vue application this error gets printed in the console:
Unknown custom element: - did you register the component correctly? etc.
I really don't understand what it's happening since in the JS Fiddle everthing works as expected... can you help me? Thanks in advance and sorry if this is a stupid question, but I've tried and searched all I could.
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.
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.