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.
Related
i'm trying to create a remote vue cli preset on github, but for some reason i keep getting a syntax error.
My preset repo: https://github.com/christoph-schaeffer/vue-preset
The command i have entered: vue create --preset christoph-schaeffer/vue-preset testProject
The Error i get:
🚀 Invoking generators...
ERROR SyntaxError: Identifier 'router' has already been declared (15:7)
SyntaxError: Identifier 'router' has already been declared (15:7)
at Object._raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:762:17)
at Object.raiseWithData (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:755:17)
at Object.raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:749:17)
at ScopeHandler.checkRedeclarationInScope (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4826:12)
at ScopeHandler.declareName (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4792:12)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:9367:22)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:865:15)
at Object.parseImportSpecifierLocal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12706:10)
at Object.maybeParseDefaultImportSpecifier (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12751:12)
at Object.parseImport (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12677:31)
At first it worked fine, then i've added several things in the preset.json along with a generator template.
After getting the error i've tried reverting the whole repo to the state it had when it was still working. However i still get that error...
I guess it's not really about the preset but instead an issue with my global babel package or something?
I'm using vue-cli version 4 and im working on a mac
Any directions on how i could get this running would be highly appreciated
I've found the issue.
First: the vue cli somehow seems to cache remote presets. That's the reason why it didn't work even after reverting changes.
The actual issue was, that the main.js shouldn't be changed like the other template files and needs special attention. For some weird reason it gives those random errors as soon as you have a main.js in your template.
If anyone is curious on how to modify your main.js in a preset check out :
https://cli.vuejs.org/dev-guide/plugin-dev.html#changing-main-file
I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template
I just started getting this error today, and it broke my whole site (because like a fool I'm loading Vuetify on page load).
Does anyone know what this means or how to fix it? Googling around didn't reveal anything helpful.
Edit:
To anyone who finds this because their site is also broken, it may be because of where you were loading vuetify.min.css from. For me I was getting at page load like so:
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
And solved the problem by importing it from the installed package instead with
import 'vuetify/dist/vuetify.min.css'
in app.js.
I'm still interested in learning about this v-ripple business, though.
I got into the same problem and I solved by installing
material-design-icons-iconfont
Run the following command to install:
npm install material-design-icons-iconfont
or, if you are running from yarn then:
yarn add material-design-icons-iconfont
Now import in main.js file:
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
You can read the vuetify documentation for more information:
Vuetify Documentation
I ran into this same issue today and started going down the route of importing it as suggested above when I noticed the header:
#charset "UTF-8";
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.
It looks like they bumped the dist version (I'm working with 1.5.12). I updated my link href to:
https://cdn.jsdelivr.net/npm/vuetify#1.5.12/dist/vuetify.min.css
...and my site was put back together again. It's probably better practice to bring it in as a module but that'll be something for the backlog. Hope this helps somebody.
For me, the problem was I had both tslint and eslint installed. After I disabled eslint, it worked.
I'm working on a project where I use electron-vue and to make the app look better I use bootstrap-vue. After a lot of debugging, I have found that changing a data property(in the parent component) that is linked to bootstrap components props. It will give me error messages telling me not to mutate props values, and that they are read-only. As it seems for me, the code works and executes, but will give me a lot of errors in the console. When I say it seems to work, what I mean is that both console.log and visually on bootstrap component it seems to change the variables correctly.
After writing a lot of test cases I have found out that changing a data property does not give an error. But when changing a data property that is linked to a bootstrap component prop it will.
A test case that shows where these error messages show up is in the code below:
<template>
<b-progress :max="maxNumberOfFiles" show-value>
<b-progress-bar :value="currentNumberOfErrorFiles"
:max="maxNumberOfFiles"
variant="danger"
show-value
/>
</b-progress>
</template>
export default {
data() {
maxNumberOfFiles: 1,
currentNumberOfErrorFiles: 0
},
methods {
test: function() {
currentNumberOfErrorFiles = 1;
}
}
}
The code above will result in 3 errors:
$attrs is readonly
$listeners is readonly
Avoid mutating a prop directly since the value will be overwritten whenever
the parent component re-renders. Instead, use a data or computed property
based on the prop's value. Prop being mutated: "value"
But this code produces zero errors:
<template>
<progress :value="currentNumberOfErrorFiles"
:max="maxNumberOfFiles"
>
</progress>
</template>
export default {
data() {
maxNumberOfFiles: 1,
currentNumberOfErrorFiles: 0
},
methods {
test: function() {
currentNumberOfErrorFiles = 1;
}
}
}
I have tried to use google for similar problems and look at the doc for both electron-vue and bootstrap-vue, and can't find anything that helped me. Is there anyone that have run into the same problem or have a solution on how to get rid of those errors?
So after a lot of headaches, I finally found a way to avoid all these warnings and errors. When I initialized the project I used these commands:
$ npm install vue-cli -g
$ vue init simulatedgreg/electron-vue <<project-name>>
After a suggestion on reinitializing the project using the vue-cli and add the plugin for electron after (This person created a quick project and had no problems). So when initializing the project again I used these commands:
npm install vue-clie -g
vue create <<project-name>>
cd <<project-name>>
vue add electron-builder
npm install bootstrap-vue
npm install
If I remeber correctly those were all the npm install commands you needed, but if you get an error of a package missing, just use npm install <> to install it.
Now I had to move every .vue file over to the new project and check that all the import statements are correct, and import and use bootstrap again in the index.js.
If you use vue-router, vuex or vuex-electron these also need to be moved over and installed again. This should just be to move the files over to the new project and check where they were imported in the old files and copy that over.
For me, it seemed that the vue init command did something that the bootstrap-vue package doesn't like. I didn't have a very large project, so the whole process took about 15-20 min.
To run an auto update dev server use the command npm run electron:serve and the command npm run electron:build to build the project. These commands can be changed in the package.json file.
The folder structure is a bit different, there will no longer be a renderer and main folder. Everything will be in the src folder. The main.js from the main folder is now named background.js. Apart from that, I think it is similar enough to figure out by just looking through the files.
I have a .js file inside an electron app that uses the quasar framework.
inside this file i have axios to make requests to my api to pull data
once i get the response i use the data for further processing. However i need some string functions to escape some strings and when i try .replace it just fails.
var t = JSON.parse(JSON.stringify(someObj))
console.log(t.message.replace(/"/g, '\\"');)
the app just fails to build and tells me there is some error in x line. if i use console.log(t.message) i see that it print the text in the terminal console, so i know the value is not null.
Also when i hover my mouse over the variable it tells me (any) not sure what this means.
image:
P.S: this is my first time working this tech stack.
turned out there was a configuration issue with babel inside electron that was using quasar framework, it didn't not accept commonjs as module and hence no vanilla javascript would work.
Just had this issue myself, I know you've answered your own question but if you can use nodejs you can install replace-string from npm and use it
command: npm install replace-string
link:
https://www.npmjs.com/package/replace-string
This issue has literally caused me a morning of work - but hope someone finds this post and fixes this issue quicker!