Comments (77)
@mozami I actually haven been working on it and have a working example for Semantic UI
for a week already. It is structured exactly as you've mentioned. Each component is in its own Vueify file because I like the idea of vueify very much, very easy and clean.
However, I mainly follow vue-cli
with webpack example and I'm still trying to get to know it. Anyway, the main problem right now is that the way I embeded vuetable-pagination
component inside vuetable
making it no longer extensible because in order for the vueify version of vuetable
to know the existing vuetable-pagination
components, the pagination components have to be declared in the components
section of vuetable
.
I have been researching if there is any way to programmatically insert child component afterward, but it doesn't seem to be possible. So, I think I have to split the vuetable-pagination
out of vuetable
, which should be easy enough. But you will now have to manually include vuetable-pagination
manually and it should still be extensible (I think). I will play around with it this week and let you know how it goes.
from vue-table.
Im glad to hear you're already been working on this! Webpack is also a better choice than browserify, so that would be great.
I think I understand your problem.... your suggestion of splitting the vuetable-pagination
from the vuetable
looks a suitable workaround for now. If a better way of injecting the pagination directly into the component can be found in future (whilst still keeping it extensible), then the component can always be improved upon.
from vue-table.
Hello I'm using browserify and I cant get this to work :|
from vue-table.
Any help ?
from vue-table.
@nacr-dev I've never work with browserify before, but if you could show me your gulpfile.js
and the html maybe I can figure something out.
from vue-table.
Ok I will give it a go,
gulpfile:
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.browserify('app.js');
}
app,js
import Vue from 'vue';
import Resource from 'vue-resource';
import Validator from 'vue-validator';
import vuetable from 'vuetable';
import Clients from './components/clients/Clients.vue';
Vue.use( Resource );
Vue.use( Validator );
Vue.use( vuetable );
new Vue({
el: '#app',
components: {
Clients
},
computed: {
},
ready() {
console.log('APP Ready to go!');
}
});
Clients.vue
<template>
<div class="row">
<div class="col-md-8">
<div class="form-inline form-group">
<label>Search:</label>
<input v-model="searchFor" class="form-control" @keyup.enter="setFilter">
<button class="btn btn-primary" @click="setFilter">Go</button>
<button class="btn btn-default" @click="resetFilter">Reset</button>
</div>
</div>
<div class="col-md-4">
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i>
</button>
<ul class="dropdown-menu">
<li v-for="field in fields">
<span class="checkbox">
<label>
<input type="checkbox" v-model="field.visible">
{{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize }}
</label>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="table-responsive">
<vuetable
api-url="http://vuetable.ratiw.net/api/users"
pagination-path=""
:fields="fields"
:sort-order="sortOrder"
table-class="table table-bordered table-striped table-hover"
ascending-icon="glyphicon glyphicon-chevron-up"
descending-icon="glyphicon glyphicon-chevron-down"
pagination-class=""
pagination-info-class=""
pagination-component-class=""
pagination-component="vuetable-pagination-bootstrap"
:item-actions="itemActions"
:append-params="moreParams"
></vuetable>
</div>
</template>
<style>
</style>
<script>
export default{
data(){
return{
msg:'hello vue'
}
},
components:{
}
}
</script>
Then in the console I get:
app-94115391c7.js:15547Uncaught ReferenceError: Vue is not defined
75 @ app-94115391c7.js:15547
s @ app-94115391c7.js:1
(anonymous function) @ app-94115391c7.js:1
76../components/clients/Clients.vue @ app-94115391c7.js:16104
s @ app-94115391c7.js:1
e @ app-94115391c7.js:1
(anonymous function) @ app-94115391c7.js:1
Does it help?
from vue-table.
I believe the problem is as @mozami referied in is initial post.
vuetable, vuetable-pagination, vuetable-pagination-dropdown have to be in three split .vue files.
from vue-table.
@nacr-dev @mozami After I've made the .vue
file, where should I put them?
src\components
or components
How would you include them in your source code with browserify and webpack?
from vue-table.
Well maybe in src\components I am not shore of this.
the include part I believe it would be done in my app.js or in my .vue file, like this.
import theName from 'theName';
and then refer to it in the components I believe would need to test this.
but attention I'm using bootstrap and does components are semantic ready correct?
I that case I would not be using douse components.
from vue-table.
well i made a simple test and I believe there is more to it than this.
I'm over my head here sorry.
from vue-table.
@nacr-dev This puzzles me a lot since most of the components I've seen has only one file, so it is easy to identify in the webpack.config.js or package.json. I'll keep researching and hopefully find a useful example. The vueify version is coming along quite well. I just don't understand how to release it for those who use browserify and webpack yet.
from vue-table.
ok I will keep a eye on this issue :) π
Tks m:8ball:
from vue-table.
@ratiw any Idea when we could test this out?
from vue-table.
@ratiw Perhaps put your work in a separate git branch and we can see and test or contribute to it?
Ive been looking around at other components (that use multiple vue
files), e.g VueBoot or vue-waterfall and think it may be possible to inject the pagination into the main vuetable component.
I can try and test with webpack as well.
from vue-table.
@nacr-dev I'm looking at publishing a dev
branch with npm
. I think you could try to pull in the dev branch and try it out using import
or require
and reference the path like so.
var Vuetable = require('vuetable/src/components/Vuetable.vue')
@mozami Right now, I've found a way work with vuetable-pagination
without having to take it out of vuetable
. This is quite simple than I thought.
var Vue = require('vue')
var Vuetable = require('vuetable/src/components/Vuetable.vue')
var VuetablePaginationBootstrap = require('vuetable/src/components/VuetablePaginationBootstrap.vue')
Vue.component('vuetable', Vuetable)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)
By registering components with Vue instead of declaring them in the components:
section, Vue can now see and use it. That means you should be able to create your own pagination component, register it with Vue, and then use it by passing its name via vuetable
's pagination-component
prop.
from vue-table.
ah! That would be fantastic :D as soon as it is online I will test it π
from vue-table.
@ratiw - That seems like it might work! Will also give it a test once its up
from vue-table.
@nacr-dev @mozami I've published the beta version of vuetable
via npm
. This contains the vueify version in src/components
directory.
According to the related doc, you will have to pull it in using this command:
npm install vuetable --tag beta
You would require it in your .js
file like so,
var Vue = require('vue')
var VueResource = require('vue-resource')
var Vuetable = require('./components/Vuetable.vue')
var VuetablePaginationBootstrap = require('./components/VuetablePaginationBootstrap.vue')
Vue.use(VueResource)
Vue.component('vuetable', Vuetable)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)
new Vue({
//...
})
I think it will work but I might be wrong. Please try and let me know how it goes.
from vue-table.
The beta
tag does not pull in the develop
branch as I thought. Will look into that first.
from vue-table.
Using this method instead,
npm install git://github.com/ratiw/vue-table#develop --save
from vue-table.
If you're using bower
,
bower install git://github.com/ratiw/vue-table#develop --save
from vue-table.
@nacr-dev @mozami Ok, got it working as expected! :)
Please try it and let me know if there's any problem.
from vue-table.
See https://github.com/ratiw/vuetable-example-vueify-bootstrap
If everything is ok, I'll publish v1.0.11 afterward.
from vue-table.
Hello, will use this method npm install git://github.com/ratiw/vue-table#develop --save
Will give feedback in minutes! :)
from vue-table.
Hello,
It seems I will need to use full path like this,
'../../../node_modules/vuetable/src/components/Vuetable.vue'
and I get a error when I run Gulp:
[09:14:43] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token
C:\Users\Nuno.Rodrigues\Code\app\node_modules\vuetable\src\components\VuetablePaginationBootstrap.vue:1
<template>
^
ParseError: Unexpected token
from vue-table.
Hmmm I get the same for Vuetable.vue
[09:35:29] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token
C:\Users\Nuno.Rodrigues\Code\zitauto\node_modules\vuetable\src\components\Vuetable.vue:1
<template>
^
ParseError: Unexpected token
from vue-table.
@nacr-dev It seems like browserify does not understand .vue
file. There might be something missing in your guilpfile.js
. In webpack, .vue
file will be piped through vue-loader
which parses out the template
, script
, and style
sections.
from vue-table.
@nacr-dev Did you setup like this? https://github.com/JeffreyWay/laravel-elixir-vueify
from vue-table.
Hello yes just like that.
from vue-table.
If I do this,
import Vuetable from 'Vuetable';
import VuetablePaginationBootstrap from 'VuetablePaginationBootstrap';
Vue.component('vuetable', Vuetable)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)
Vuetable will pass but VuetablePaginationBootstrap will fail.
from vue-table.
Now like this,
import Vuetable from 'Vuetable';
Vue.component('vuetable', Vuetable)
Vue.component('vuetable-pagination-bootstrap', Vuetable.VuetablePaginationBootstrap)
Gulp has no error! Nack in five to check.
from vue-table.
I Still get the Vue is not defined erro π
from vue-table.
@nacr-dev How do you import Vue?
from vue-table.
On my app.js file I have it like this,
import Vue from 'vue';
import Resource from 'vue-resource';
import Validator from 'vue-validator';
from vue-table.
I have my custom components an all is ok and I am look at yours and I can see the problem.
from vue-table.
Hmmm checking this!
https://laracasts.com/discuss/channels/vue/parseerror-unexpected-token-template
from vue-table.
I think you have to import it like i did
Import Vuetable from 'vuetable/src/components/Vuetable.vue'
From my understanding import
and require
are the same.
from vue-table.
@ratiw that way I still get
C:\Users\Nuno.Rodrigues\Code\zitauto\node_modules\vuetable\src\components\Vuetable.vue:1
<template>
^
ParseError: Unexpected token
But if I do this
https://laracasts.com/discuss/channels/vue/parseerror-unexpected-token-template
no error.
Will give feed back in 10m
from vue-table.
Will have to go out for an hour or two. Will check back later though.
from vue-table.
ok π
from vue-table.
This last method worked for me. It seems, .vue files have to be in the resource folder!
from vue-table.
The only error I'm having is this
app-4ce6c70882.js:6502 [Vue warn]: Failed to resolve component: vuetable-pagination-bootstrap (found in component: <vuetable>)
from vue-table.
@nacr-dev Did you import and register it?
Import Vue from 'vue'
Import VueResource from 'vue-resource'
Import Vuetable from 'vuetable/src/components/Vuetable.vue'
Import VuetablePaginationBootstrap from 'vuetable/src/components/VuetablePaginationBootstrap.vue'
Vue.use(VueResource)
Vue.component('vuetable', Vuetable)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)
from vue-table.
Seems like im missing out on the action here - Im going to give this a try shortly and report back as well.
@ratiw - did you test this with webpack or browserify?
from vue-table.
@mozami with webpack. See here
from vue-table.
@ratiw Thanks - I've got browserify setup at the moment, will check there first and then with webpack as well later.
from vue-table.
@mozami give some feedback on browserify so I can check if I missed something
from vue-table.
@ratiw I will check!
from vue-table.
@ratiw since I'm in side a component my self what I did was
components:{
Vuetable, VuetablePaginationDropdown, VuetablePaginationBootstrap
},
from vue-table.
@nacr-dev So far i'm getting exactly the same errors that you experienced earlier, so pretty much following your answers at the moment. Hang tight, I will report back here once I have something working or if can't get any further...
from vue-table.
tks m:8ball:
from vue-table.
well I changed the code to this:
components:{
'vuetable': Vuetable,
'vuetable-pagination-dropdown': VuetablePaginationDropdown,
'vuetable-pagination-bootstrap': VuetablePaginationBootstrap,
},
Same result.
from vue-table.
@nacr-dev Try registering pagination components outside like I did.
Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)
Please note the, vuetable-pagination
and vuetable-pagination-dropdown
use Semantic UI for styling.
Since they are embbed inside vuetable
, you cannot set its props directly. You have to broadcast event vuetable-pagination:setting
from main vue instance to it.
new Vue({
// ..
ready: function() {
this.$broadcast('vuetable-pagination:setting', 'icons', { prev: 'glyphicon glyphicon-chevron-left', next: 'glyphicon glyphicon-chevron-right'})
}
})
from vue-table.
Ok, I stand corrected :)
from vue-table.
So at this moment I have no errors:
On main js in my case app.js,
import Vue from 'vue';
import Resource from 'vue-resource';
import Validator from 'vue-validator';
import Vuetable from './components/global/components/vuetable/Vuetable.vue';
import VuetablePaginationBootstrap from './components/global/components/vuetable/VuetablePaginationBootstrap.vue';
import VuetablePaginationDropdown from './components/global/components/vuetable/VuetablePaginationDropdown.vue';
import Clients from './components/clients/Clients.vue';
Vue.use( Resource );
Vue.use( Validator );
Vue.component('vuetable', Vuetable);
Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)
And
in Clients.vue
I implement your sample code and all is working, I still have some stuff to check but no error in console.
from vue-table.
But having to copy the .vue files to a dir in resource dir bugs me !
from vue-table.
@nacr-dev Same here - im also trying to avoid that route. Playing around with the package now to see if we can do it another way.
from vue-table.
@ratiw is there something missing the check boxes are not working.
from vue-table.
@mozami will wait for you on that one :)
from vue-table.
@nacr-dev unfortunately, havent gotten very far at the moment. I have also encountered the exact same issues as you. Will keep at it for now, and post back later with some updates.
from vue-table.
@nacr-dev The checkboxes are working fine with my example. Please check if you've bound them with v-model
?
May be I'll try an example with browserify if I have time.
from vue-table.
hmmm I simply changed the tableColumns data and the url from your exemple :|
from vue-table.
@ratiw @nacr-dev I think im making some progress with browserify, though it will mean modifications on the package itself. If i get it working properly, Ill upload my work here or send a pull request.
Im not sure if this will break the existing webpack integration, but Ill test out webpack later to ensure.
Im heading out for a bit, will post back here a little later.
from vue-table.
@mozami π
from vue-table.
I think the problem was quite small in the end. @nacr-dev had gone through most of the issues before me, so I just picked up from where he (or she) left off.
@ratiw i have submitted a PR - Adding the browserify transform for vueify helps eliminate the following error that @nacr-dev described above:
[09:14:43] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token
C:\Users\Nuno.Rodrigues\Code\app\node_modules\vuetable\src\components\VuetablePaginationBootstrap.vue:1
<template>
^
ParseError: Unexpected token
All you need to do is add the following to the package.json
file of the vuetable component:
"browserify": {
"transform": ["vueify"]
},
This means you do not have to move anything to the resource folder.
As for declarations, I am using the same as @nacr-dev and everything seems to work fine:
import Vue from 'vue';
import Resource from 'vue-resource';
import Vuetable from 'vuetable/src/components/Vuetable.vue';
import VuetablePaginationBootstrap from 'vuetable/src/components/VuetablePaginationBootstrap.vue';
import VuetablePaginationDropdown from 'vuetable/src/components/VuetablePaginationDropdown.vue';
Vue.use(Resource);
Vue.component('vuetable', Vuetable);
Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)
Vue.component('vuetable-pagination-bootstrap', VuetablePaginationBootstrap)
Although the component can be declared within the Vue instance as well without any problems for me.
@ratiw or @nacr-dev Can you confirm if this works for you?
from vue-table.
@mozami Yes, it does work! Browserify can now transform .vue
file. Thanks a lot. :)
I've already updated the package.json
of vuetable file to include the browserify section and pushed it up to the develop branch.
@nacr-dev You could run npm update
and gulp
should now able to compile .vue
file.
from vue-table.
@ratiw Great! Im tied up with some other stuff at the moment, but will test out with webpack later when I get a chance.
I wanted to refactor the component structure to have one index.js file that imports in the other ".vue" files, so that you would only need to require one "vuetable" component from your js. This would also require changing the way the pagination works - which is something you've already been through I believe. I ran into template fragmentation issues so put that off on hold:
[Vue warn]: Attributes "api-url=/api/urls", ":fields=columns", ":per-page=perPage" ... are ignored on component <vuetable> because the component is a fragment instance
from vue-table.
@mozami Yeah, the reason that I have another div
to wrap around the table
and pagination
is to handle the fragment instant. I had been working on separating the pagination component out of vuetable as well. This will not cause fragment instance warning because it is now a separate component but the problem is that with this implementation, you are now responsible for wiring the event between vuetable
and vuetable-pagination
. It is not that difficult, but it is just not convenient as it is right now. But I'm open to any suggestion anyway. :)
from vue-table.
@ratiw OK - I understand your decision. It also makes sense from the end user's point of view and keeping things simple. I'm good with how it is for now :)
from vue-table.
Ok, now I can do It :) fantastic.
It Works.
from vue-table.
π π I guess @ratiw can publish this now. Thanks!!
from vue-table.
Will try to do it tonight. @nacr-dev @mozami Thank you very much for help testing this thing. I'm really learning a lot during the process. :)
from vue-table.
@ratiw thank you for the package it solves a gap I had with vue :)
from vue-table.
Exactly - We should be thanking you here, @ratiw! We're all figuring it out here. I might have some more questions once I begin working with vue properly - is github issues preferred place to do so or just for issues?
from vue-table.
@mozami I think I would prefer you ask question in Laracasts Vue channel or Vue.js Forum. I usually learning something there. For issues, please use github as it is easier for me the track it here. Just tag me, so that I know about it. :)
from vue-table.
@nacr-dev In v1.0.11, you can do use vuetable-pagination:set-options
to set props for pagination component.
If you use my example code, you can place this code in watch:
section and the VuetablePaginationDropdown will use Twitter's Bootstrap styling.
new Vue({
//...
watch: {
'paginationComponent': function(val, oldVal) {
this.$broadcast('vuetable-pagination:set-options', {
icons: {
prev: 'glyphicon glyphicon-chevron-left',
next: 'glyphicon glyphicon-chevron-right'
},
wrapperClass: 'form-inline',
dropdownClass: 'form-control',
linkClass: 'btn btn-default'
})
}
}
})
So, update to the v1.0.11 and try it out.
from vue-table.
@ratiw noted: will use the forums for Q&A
I'll give 1.0.11 a spin tomorrow and report back if there's any issues.
from vue-table.
Related Issues (20)
- Search with a extra data. HOT 6
- problem with scroll HOT 1
- Demo does not work in chrome HOT 4
- Error compiling template!!!! HELP ME!!! HOT 6
- Row totals HOT 3
- Is this an expected behavior of field callback?
- Can't style my grid to fit the content or a specific column HOT 2
- How use it for laravel HOT 1
- cell class cb
- Is it possible to add/del row dynamically? HOT 1
- unable to filter dates HOT 3
- No Data Available HOT 1
- Can I apply paging on client side? HOT 2
- Loading table with pre settings like sorting and page
- The word prev is spelled with the word next by mistake
- Pagination data not being transpile by polyfill
- Can i add `data-xxx` attribute to table head field? HOT 1
- http-fetch not showing data
- how to make columns resizableοΌ
- How to use Cursor-Pagination
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-table.