A stackable panel component for Vue.js
https://officert.github.io/vue-slideout-panel
npm install vue2-slideout-panel --save-dev
Pull requests are welcome, or open up an issue if you have ideas for additional functionality, new features or bugs.
Hello, I was unable to get your instructions working with the very latest version of vue-cli. For whatever reason with webpack the plugin would not register itself correctly. I ended up hacking around the instructions
import * as Slideout from 'vue2-slideout-panel';
Vue.component('slideout-panel', Slideout.VueSlideoutPanel);
Not really sure what I'm doing wrong.
I also had to invoke it in a similar manner
Slideout.vueSlideoutPanelService.show
As it wasn't able to install itself correctly. Awesome plugin though once I got it working
I am trying to figure how to keep alive the content here:
It is possible? or the component need to be created each time?
How to use your plugin with nuxt?
I added it to my plugins and to to nuxt.config.js like
plugins: [
{src: '~/plugins/vue2-slideout-panel', ssr: false}
]
No matter how or where I put the class, cssClass attributes never get applied. Are you sure this works?
There's a slight continuation of the opening of the panel (or jiggle) after opening the panel initially.
This is happening in Chrome and Edge on a Mac.
I'm not sure what changed between v2.1 and v2.2, but any version above 2.1 results in the "not registered" error for slideout-panel. I have installed every version between 2.1 and 2.5 and all above 2.1 exhibit the same behavior.
The registration and usage is fairly basic ( full app.js file below for dependency tree ):
// Import our jQuery and Bootstrap extensions
import "bootstrap/dist/js/bootstrap.js";
import BootstrapVue from 'bootstrap-vue';
import PrettyCheckbox from 'pretty-checkbox-vue';
import VueTruncate from 'vue-truncate-filter';
import VTooltip from 'v-tooltip';
import Grid from 'vue-js-grid';
import VueCurrencyFilter from 'vue-currency-filter';
import VueCharts from 'vue-chartjs';
import VueNestable from "vue-nestable";
// Module components
import PageHeader from '@myApp/admin/components/ui/page-header';
import BackButton from '@myApp/admin/components/ui/back-button';
import TablePagination from '@myApp/admin/components/ui/table-pagination';
import DismissableAlert from '@myApp/admin/components/ui/dismissable-alert';
import Vuex from 'vuex';
import Router from 'vue-router';
import { sync } from 'vuex-router-sync';
import createStore from "@myApp/admin/store";
import createRouter from "@myApp/admin/router";
import createFilters from "@myApp/filters/index";
import App from "@myApp/admin/App";
const storeInstance = createStore( Vue, Vuex );
const routerInstance = createRouter( Vue, Router, storeInstance );
routerInstance.beforeEach((to, from, next) => {
if ( !storeInstance.getters.authUser && to.name !== 'login' ) {
next({ name: 'login' });
} else {
next();
}
});
sync( storeInstance, routerInstance );
Vue.use( VueTruncate );
Vue.use( VTooltip );
Vue.use( PrettyCheckbox );
Vue.use( BootstrapVue );
Vue.use( Grid );
Vue.use( VueCharts );
Vue.use( VueNestable );
Vue.component( 'page-header', PageHeader );
Vue.component( 'back-button', BackButton );
Vue.component( 'table-pagination', TablePagination );
Vue.component( 'dismissable-alert', DismissableAlert );
Vue.component( "generic-loader", require( "@myApp/components/generic-loader" ).default );
Vue.use(
VueCurrencyFilter,
{
symbol : '$',
thousandsSeparator: ',',
fractionCount : 2,
fractionSeparator : '.',
symbolPosition : 'front',
symbolSpacing : false
}
)
// global event bus
window.Event = new Vue();
const admin = new Vue( {
el : "#app",
store : storeInstance,
router : routerInstance,
filters : createFilters( Vue ),
components: { App }
} );
export default admin;
Usage in-app is global ( App.vue ) below:
<template>
<div id="app">
<slideout-panel></slideout-panel>
<top-search></top-search>
<b-container fluid>
<b-row>
<sidebar v-if="authUser"></sidebar>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<router-view></router-view>
</main>
</b-row>
</b-container>
</div>
</template>
<script>
import TopSearch from "@myApp/admin/components/ui/top-search";
import Sidebar from "@myApp/admin/components/ui/sidebar";
import { mapGetters } from "vuex";
export default {
name : "app",
components: {
TopSearch,
Sidebar
},
computed: {
...mapGetters([
"authUser"
])
},
methods : {},
watch : {}
};
</script>
I've rolled back to 2.1, for now, which resolves the issue, but would like to stay on the upgrade path.
Related to #37
Updates conditional to check for a numeric panel height/width and if that's the case append 'px'
Previously if width: '50%' were used we would end up with a width of '50%px'
Thanks a lot for this component, it's great!
Nice work, exactly how we would like
Any plan to upgrade to latest vue js 3?
I'm using Gridsome for a project and noticed that this plugin does not have support for SSR builds. The Gridsome documentation does provide some information about working around plugins that do not support SSR, but unfortunately I tried implementing their method and still could not get this plugin to work. Would like to know if there's a possibility of supporting SSR?
If I understand this correctly - to put contents to Slide Panel you need a Vue Component, which you don't put anywhere in but only inside component option of $showPanel
When using Vue App created with Vue CLI I get build error
The "PanelTextContent" component has been registered but not used
Can't I just put plain html / text to be opened inside panel?
If I do put <panel-text-component></panel-text-component> to my template as well, then inside the panel I only get empty component element without any contents and following warning in browser console:
[Vue warn]: Unknown custom element:
- did you register the component correctly? For recursive components, make sure to provide the "name" option.
Some working example would be welcome ...
Hi, I have experienced weird behaviour when I open slideout panel in Firefox (v74). In some cases slideout panel disappears immidiatelly after openning and slides-in again.
You can see it in picture bellow:
Any idea what could it be?
Thanks for investigating
Update css for animating panel slide out
Add removeBg option to remove the background entirely.
Fix package.json
Small bug fix for console error that happens when clicking outside panel. Thanks to @korpow for the fix: https://github.com/officert/vue-slideout-panel/pull/42
Add support for disabling escape key click to close panels:
this.panel1Handle = this.$showPanel({
height: '400px',
disableEscClick: true,
props: {
name: this.example1Form.name
}
});
Add support for opening panels from top and bottom. Example:
this.panel1Handle = this.$showPanel({
height: '400px',
openOn: 'top',
cssClass: 'panel-1-custom-class',
component: 'panel-1',
keepAlive: true,
props: {
name: this.example1Form.name
}
});
Note the openOn is equal to top and we're using the height prop insead of width.
