This project is not covered by Drupal’s security advisory policy.

Vuew ViewsVue Views is a module that will add a new Format to views to display the results of the view using Vue JS Framework. By doing so, Site Builders will be able to add the amazing features provided by Vue on Drupal Views, like asynchronous loading of data and fancy animated transitions on loading.
Developers should be able to customize any vue views display by modifying CSS, Vue templates and Vue js code on their own modules or themes.
This module intends to be a Views Vue implementation with damn easy configuration options for site builders and developers to add fancy Vue.js stuff to their views out of the box, With no programming at all or very little. The module should provide the easiest ways and documentation.
The development of this module is in its beginnings and it's still quite far from a stable version. However anybody that is studying ways to integrate Vue or any JS Framework with Drupal might already find this code useful. In this case the integration revolves around Drupal Views style plugins.

This is the current status of 8.x-0.x-dev.
Right now we are on Step 0.1:

0.1

  • Setup a Views Style Plugin to declare Vue Views type of view.
  • Use a theme function to generate an output from a Twig / Vue template.
  • Load Vue js, Vue Router, Vue Resources..

Setup the Json API endpoint to serve the View data to the Vue instance.

  • Serve when Format > Show is in Fields mode.
  • Serve html render for rows when Format > Show is in Content mode.
  • Setup serving for different content types.
  • Serve Views configuration data: Check views configuration options that might be useful on the Vue frontend.

Setup the Vue code

  • The Vue app instance.
  • The router.
  • The data store connected to Vue views Json API.
  • Display data in a Table.
  • Create another display as a Grid.
  • Allow for Plugin configuration form to choose between the two templates.
  • Add some fancy animation using Vue Transitions.
  • Consider some Vue libraries to use on animations.


General Roadmap

I propose the following roadmap, to get to the stable v1.0.
For v1.0 we want to implement the most common views configuration that comes with Drupal cores views interface.

0.1 Module bases
      Vies Style plugin
      Views Twig/Vue  template
      Json API. Serve fields. Only field to begin with.
      Load Vue.js
      A fancy loading transition.
0.2 Making configuration available to other modules.
      Consider Using Layout Plugin module for templates.
      Allow to easily override Vue template.
      Allow to easily override Vue instance js code.
      Allow to easily override CSS.
03. Implementing a Pager
      Adding a pager implementation that uses some Vue pager library.
      Pager should work and show according to the Views pager configuration section.
0.4 Adding support all Basic field types 
      Field types that comes with Drupal 8 core 
      Including reference fields.
      Label display and other views Fields configurations should be analyzed for each field type.
0.5 Adding a details page 
      Vue View items should have the functionality to display the full content of fields on the view listing.
      Configuration of this details page should be overridable by other modules and themes.
      The order of the fields showed on the details display should configurable.
      Allow to choose from some options to display nodes details pages.
0.6 Adding Styles of views
      Adding the most common views basic styles implemented on Twig/Vue templates. 
      Table, Grid, HTML List, Unordered List.
0.7 Adding Animated Transitions
      Adding a bunch of included transitions built with Vue Transitions just for Site builders 
to enable. 
      Choose some nice Vue library to create fancy animations on transitions.
      Transitions can be selected for:
          View loading.
          Views Pagination transitions.
          Views list to details transitions.
8.x-v1.0-Alpha1 ~
8.x-v1.0 Stable.
AttachmentSize
Vie Views Logo42.15 KB

Project information

  • Module categories: Developer Tools
  • Created by x7ian on , updated
  • shield alertThis project is not covered by the security advisory policy.
    Use at your own risk! It may have publicly disclosed vulnerabilities.

Releases