{"id":13423938,"url":"https://github.com/AlexToudic/vue-page","last_synced_at":"2025-03-15T17:32:38.251Z","repository":{"id":23722523,"uuid":"27095500","full_name":"alextoudic/vue-page","owner":"alextoudic","description":"Pagejs wrapper for Vue.js","archived":false,"fork":false,"pushed_at":"2015-08-18T20:49:22.000Z","size":869,"stargazers_count":14,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-10T18:55:11.868Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alextoudic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-24T21:15:33.000Z","updated_at":"2017-02-18T13:01:20.000Z","dependencies_parsed_at":"2022-08-22T03:31:00.908Z","dependency_job_id":null,"html_url":"https://github.com/alextoudic/vue-page","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextoudic%2Fvue-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextoudic%2Fvue-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextoudic%2Fvue-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextoudic%2Fvue-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alextoudic","download_url":"https://codeload.github.com/alextoudic/vue-page/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243767554,"owners_count":20344938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:45.293Z","updated_at":"2025-03-15T17:32:37.169Z","avatar_url":"https://github.com/alextoudic.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# DEPRECATED, YOU SHOULD USE [VUE-ROUTER](https://github.com/vuejs/vue-router) WHICH IS THE OFFICIAL VUEJS' ROUTER\n\n# vue-page\n\nRouting plugin for Vue.js (v0.11). Based on Vue.js Guide about routing and using pagejs.\n\nBasically, this plugin is just a wrapper for pagejs. It creates a global ViewModel in which your components will be rendered using v-component, v-transition so you can define methods which will be called before enter, on enter and/or on leave and v-with so you can get url params.\n\n### Getting started\n\nFirst install the plugin\n\n```\nnpm install vue-page --save\n```\n\n### Initialize\n\nThen initialize the plugin with your routes (see [pagejs](http://visionmedia.github.io/page.js) for more infos on routes). Note that the routes initialization is a little bit different from the pagejs one because I wanted to allow url \"nesting\".\nEach string value which is affected to a property is the of a v-component instance.\n\n```javascript\nvar Vue     = require('Vue'),\n    vuePage = require('vue-page');\n\nVue.use(vuePage, {\n  rootElement: '#app', //element in which the components will injected\n  class: 'page', //class of the components' wrappers (default is view)\n  base: '/base', //optionnal\n  cssTransitions: false, //optionnal default is false\n  keepAlive: true, //optionnal default is false\n  routes: {\n    '/fr': {\n      '/accueil': 'home',\n      '/a-propos': 'about'\n    },\n    '/en': {\n      '/home': 'home',\n      '/about': 'about'\n    },\n    '/hello/:name': 'greetings',\n    '*': 'lost' //not found\n  },\n  default: '/base/en/home' //redirection for '/' if needed\n});\n```\n\nThis configuration will create the following routes (on right are the components names):\n\n'/base/fr/accueil' -\u003e 'home'\n\n'/base/fr/a-propos' -\u003e 'about'\n\n'/base/en/home' -\u003e 'home'\n\n'/base/en/about' -\u003e 'about'\n\n'/hello/:name' -\u003e 'greetings'\n\n'*' -\u003e 'lost'\n\nEach component have to be defined if you don't want a warning.\n\nTwo differents url can load the same template. In this example /base/fr/accueil and /base/en/home both load the home component. This way, my french and english users will both have a url in their language but I will only make my template and controller one time. I'm sure you'll find a lot of cases in which you want something like that too.\n\n### Usage\n\nThis plugin won't force you to implement your components with any specific syntax. Moreover, it allows you to define methods which will be called by v-transition.\n\n```javascript\nvar Vue      = require('Vue'),\n    TweenMax = require('TweenMax');\nvar template = require('./template.html');\n\nmodule.exports = Vue.component('home', {\n  template: template,\n  events: {\n    'router:update': function () {\n      console.log('url changed');\n    }\n  },\n  methods: { \n    helloVue: function () {\n      Vue.page.show('/hello/VueJS');\n    },\n\n    beforeEnter: function () {\n      //set style before anim\n\n      TweenMax.set(this.$el, {\n        x: -window.innerWidth/2\n      });\n    },\n    enter: function (cb) {\n      //animate enter\n\n      TweenMax.to(this.$el, 0.8, {\n        x: 0,\n        onComplete: cb\n      });\n    },\n    leave: function (cb) {\n      //animate leave\n\n      TweenMax.to(this.$el, 0.8, {\n        x: -window.innerWidth/2,\n        onComplete: cb\n      });\n    }\n  }\n});\n```\n\nAs you can see in this component example, the plugin fires events. On startup, it fires 'router:start' and on each url change 'router:update'. So you can listen those events to do whatever you want.\n\nYou can also define beforeEnter, enter and leave as methods but they're all optionnal. It becomes pretty handy if you want fancy transitions between your pages. For enter and leave don't forget to call the callbacks, the world won't collapse if you don't but your DOM will be dirty as v-transition uses it to clean up.\n\nYou can also set cssTransitions to true and define the animations in your CSS file using .view-enter and .view-leave classes. But note that if you use css transitions, your beforeEnter, enter and leave methods won't be called and you'll have to listen update events if you want to execute a method on update.\n\nYou also have a Vue.page.show method which call the pagejs show method so you can redirect your user on an other url.\n\n### Params\n\nAll properties from pagejs context can be found in a context property on your component which is set using v-with. Thanks to that, if I go to /hello/world which fires the url /hello/:name and call my greetings component, I will be able to use name in my template as following\n\n```html\n\u003ch1\u003eHello {{context.params.name}}\u003c/h1\u003e\n```\n\nAnd of course, it doesn't need any specific development in my component instantiation\n\n```javascript\nvar Vue = require('Vue');\nvar template = require('./template.html');\n\nmodule.exports = Vue.component('greetings', {\n  template: template,\n  methods: {\n    beforeEnter: function () {\n      //set style before anim\n\n      TweenMax.set(this.$el, {\n        y: -20,\n        opacity: 0\n      });\n    },\n    enter: function (cb) {\n      //animate enter\n\n      TweenMax.to(this.$el, 0.4, {\n        y: 0,\n        opacity: 1,\n        onComplete: cb\n      });\n    },\n    leave: function (cb) {\n      //animate leave\n\n      TweenMax.to(this.$el, 0.4, {\n        y: 20,\n        opacity: 0,\n        onComplete: cb\n      });\n    }\n  }\n});\n```\n\nSee, nothing but animations.\n\nThis context object also contains infos about the url so if you two urls which call the same component, you can easily know the url used to open it.\n\nYou should look at the [pagejs documentation](http://visionmedia.github.io/page.js/) to know what other properties you can get from context.\n\n### Working with Webpack\n\nVue-page is now working with Webpack. My example is based on [vue-webpack-example](https://github.com/vuejs/vue-webpack-example).\n\nHere is the main.js I used as entry.\n\n```javascript\nrequire('./main.styl')\n\nvar Vue = require('vue')\nvar vuePage = require('./VuePage')\n\nwindow.onload = (function () {\n  Vue.use(vuePage, {\n    rootElement: '#app',\n    keepAlive: true,\n    cssTransitions: true,\n    viewsPath: './views/',\n    routes: {\n      '/a': 'a',\n      '/b/:name': 'b'\n    }\n  })\n})\n```\n\nThe important part is the viewsPath property. You have to define it so the plugin will know where to find the components your referencing. All components have to be defined in an index.js at ./views/[component-name].\n\nFor example the b component is defined in ./views/b/index.js as following\n\n```javascript\nmodule.exports = {\n  template: require('./template.html'),\n  replace: true\n}\n```\n\nThis component declaration is comming directly from vue-webpack-example.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexToudic%2Fvue-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlexToudic%2Fvue-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexToudic%2Fvue-page/lists"}