ais-one / cookbook Goto Github PK
View Code? Open in Web Editor NEWVueJS + NodeJS Evergreen Cookbook
Home Page: https://dev.to/aisone/vuejs-expressjs-crud-cookbook-46l0
License: MIT License
VueJS + NodeJS Evergreen Cookbook
Home Page: https://dev.to/aisone/vuejs-expressjs-crud-cookbook-46l0
License: MIT License
Hi, I've tried to run example-rest but I found some issues
There was a trivial one on backend project, because on your git repository ./models/User.js was committed as ./models/user.js. Backend runs after changing filename.
I was not able to fix issue on example-rest, it seems that VueCrudX cannot be loaded
bedinsky@CPR-DSK-10-313:~/git/vue-crud-x/example-rest$ npm run serve
[email protected] serve /home/bedinsky/git/vue-crud-x/example-rest
vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 15:56:33
This dependency was not found:
To install it, you can run: npm install --save core-js/modules/web.dom.iterable
@ais-one ... keen to try out this template. I do have a few questions:
crudTable
?v-select
(inside crudTable
and crudFilter
) be loaded from API or vuex?I'm getting Syntax error for the spread operator after installing and running npm run dev
. After installing the "babel-plugin-transform-object-rest-spread" I'm now getting Unexpected token error for the import statements for the component imports.
What am I doing wrong?
Thank you for your hard work on this! I'm looking forward to trying it out.
Unfortunately when I follow the steps in the Quick Start, I'm getting an error.
The following steps appeared to complete successfully:
git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x
npm run install-libs
npm run install-db
But npm run dev
fails with the following errors:
[nodemon] starting `node index.js`
example-app development
missing configuration file, using defaults Error: ENOENT: no such file or directory, open 'C:\dev\samples\vue-crud-x\example-app\config/.env.development'
TEST_ENV= undefined
internal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module './firebase.key.json'
Require stack:
- C:\dev\samples\vue-crud-x\example-app\config\index.js
- C:\dev\samples\vue-crud-x\common-app\config.js
- C:\dev\samples\vue-crud-x\app.js
- C:\dev\samples\vue-crud-x\index.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.Module._load (internal/modules/cjs/loader.js:686:27)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (C:\dev\samples\vue-crud-x\example-app\config\index.js:7:22)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\dev\\samples\\vue-crud-x\\example-app\\config\\index.js',
'C:\\dev\\samples\\vue-crud-x\\common-app\\config.js',
'C:\\dev\\samples\\vue-crud-x\\app.js',
'C:\\dev\\samples\\vue-crud-x\\index.js'
]
}
Appears to be coming from this line in 'example-app/config/index.js':
7 | const FIREBASE_KEY = require('./firebase.key.json') || ''
npm run init-db have error at windows op system because of line below at vue-crud-x >backend >package.json line 7
"init-db": "rm -f dev.sqlite3&&npx knex migrate:latest --env development&&npx knex seed:run --env development",
windows dont have "rm" windows users have to change it to "del".
better to mention this to the installation notes
Tried to follow the quick start section of README.md. Step npm start
exitted with:
...
[1] <s> [webpack.Progress] 94% after seal
[1] <s> [webpack.Progress] 95% emitting
[1] <s> [webpack.Progress] 95% emitting HtmlWebpackPlugin
[1] <s> [webpack.Progress] 95% emitting CopyPlugin
[1] <s> [webpack.Progress] 98% after emitting
[1] <s> [webpack.Progress] 98% after emitting CopyPlugin
[1] ERROR Failed to compile with 2 errors18:06:26
[1]
[1] These relative modules were not found:
[1]
[1] * ../../cfg.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/SignIn.vue?vue&type=script&lang=js&
[1] * ../cfg.json in ./src/firebase.js
[1] <s> [webpack.Progress] 100%
[1]
In Folder example-web/vite/src/components
Implement functionality to upload csv to database
I'm trying to use this package, but I get a lot of errors:
app.js:41304 [Vue warn]: Missing required prop: "storeName"
found in
---> <VueCrudX>
<Book> at resources/js/components/About.vue
<VContent>
<VApp>
<App> at resources/js/views/App.vue
<Root>
app.js:41304 [Vue warn]: Missing required prop: "crudFilter"
found in
---> <VueCrudX>
<Book> at resources/js/components/About.vue
<VContent>
<VApp>
<App> at resources/js/views/App.vue
<Root>
app.js:41304 [Vue warn]: Missing required prop: "crudTable"
found in
---> <VueCrudX>
<Book> at resources/js/components/About.vue
<VContent>
<VApp>
<App> at resources/js/views/App.vue
<Root>
app.js:41304 [Vue warn]: Missing required prop: "crudForm"
found in
---> <VueCrudX>
<Book> at resources/js/components/About.vue
<VContent>
<VApp>
<App> at resources/js/views/App.vue
<Root>
app.js:41304 [Vue warn]: Missing required prop: "crudOps"
found in
---> <VueCrudX>
<Book> at resources/js/components/About.vue
<VContent>
<VApp>
<App> at resources/js/views/App.vue
app.js:42567 TypeError: Cannot read property 'doPage' of undefined
at VueComponent.created (app.js:36755)
at invokeWithErrorHandling (app.js:42533)
at callHook (app.js:44884)
at VueComponent.Vue._init (app.js:45666)
at new VueComponent (app.js:45811)
at createComponentInstanceForVnode (app.js:43960)
at init (app.js:43791)
at createComponent (app.js:46637)
at createElm (app.js:46584)
at createChildren (app.js:46712)
app.js:41304 [Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'getters' of undefined"
my app.js looks like this:
import VueCrudX from 'vue-crud-x/dist/VueCrudX';
Vue.component('vue-crud-x', VueCrudX);
What is minimum amount of code I need to implement a CRUD table?
Hi @ais-one thank-you very much for this component and the example.
For the example-spa to work the file backend/models/user.js needed to be renamed to backend/models/User.js
Apologies for not submitting the change myself.
In the current implementation, defaultRec is a method or function inside crudForm, but sometimes, the default record must be got from the store. For example, if you have a 'code' field that must be set to the next available code in the resource or a date field that must be set to the last date used for that resource. For these examples to work, a call must be made to the backend to get de default record values.
I guess the place to program this call is in crudOps, but I am just a js and vue beginner.
In Folder example-web/vite/src/components
The select all rows check box in the table does not work / respond
/vue-crud-x/example-spa
cd ../backend&&npm run-script init-db
npm ERR! missing script: init-db
I'm very interesting in improve this project so if you need some help let me know.
I builded some similar feature for an AngujarJS application, but now I'm trying to build it in vue, thinking in generation by config
whatsapp: +57 300 83 23 960
mail: [email protected]
Thanks for this project. I like it. Thanks for your work.
I did this.
# Settings.
dir=/srv/test
proj=vuecrudx
mkdir -p $dir
cd $dir
git clone https://github.com/ais-one/vue-crud-x.git $proj
cd $proj
cd example-spa
# ------- edit .env ---------
cp .env-sample .env
# ------- edit .env ---------
# ------- edit .env ---------
cp ../backend/.env-sample ../backend/.env
# ------- edit .env ---------
npm i
npm run build-rest
npm run init-db
npm run start
It seems to work for many things. I can login and create a book, etc.
I get errors in the console. See pics.
Are the errors normal?
Did I do something wrong?
Why does it show the "find error. network error. failed to fetch" after about 5 minutes?
how to render url image inside the table ?
We are using your project as part of a vue web configuration, and we have made a series of changes, in appearance and logic.
Would you be interested in taking the changes to your repository?
Thanks.
Manual trigger
Hello
Is there an stet by step article or tutorial for vue-crud-x?
Please be reminded by
At the html page , add this at the header to make your whole project compatible with Safari 11 and Safari 10
vue-cli 3 still supports templates, but we would like to take advantage of the plugin way of doing things in vue-cli 3 and will move to it once it is stable
https://github.com/vuejs/vue-cli/blob/dev/docs/cli.md#pulling-vue-cli2x-templates-legacy
for me the "exists" is always false.
const metaRef = firestore.collection('meta').doc('party')
const meta = await t.get(metaRef)
if (!meta.exists) {
throw new Error(500)
}
Thanks
Hello!
I just stumbled upon this library, and it feels like it would be immensely helpful in my development process.
I'm curious, though, whether there's any component of this application that can automatically generate components (or pages, or views, or whatever you call it) for each of the endpoints exposed by an OpenAPI spec document.
I noticed that the example servers expose their own OpenAPI spec doc, but it appears that the demos use a predefined example data model that isn't automatically generated from that spec.
Any assistance would be much appreciated!
Can be seen in latest develop branch
When you select the multi-crud page example.
If you open left CRUD table filter, you see header Party Notes Component Filter (it should be "Party Notes Filter").
If you open right CRUD table filter, you see header Party Notes Component Filter.
Somehow, somewhere the Filter component that is async loaded is being overwritten
https://github.com/ais-one/vue-crud-x/blob/develop/example/src/components/MultiCrudPage/Example.vue
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.