https://github.com/fiedsch/vuetaocharts

Contao Content Elements for creatimg charts with Vue.js (an experiment)
https://github.com/fiedsch/vuetaocharts

contao experiment vuejs

Last synced: about 8 hours ago
JSON representation

Contao Content Elements for creatimg charts with Vue.js (an experiment)

• Host: GitHub
• URL: https://github.com/fiedsch/vuetaocharts
• Owner: fiedsch
• Created: 2017-03-12T11:18:28.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-02T10:51:13.000Z (over 6 years ago)
• Last Synced: 2024-12-20T09:29:30.781Z (3 days ago)
• Topics: contao, experiment, vuejs
• Language: Vue
• Size: 157 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vuetaocharts

Charts with Vue.js and Contao. This is an experiment not yet ready for production.

Feedback is very welcome.

## Part one (Vue.js)

Dynamic charts with Vue.js

### Build Setup (Vue with Webpack)

#### Prerequisites

* `nodejs` `npm`, `vue`-Cli

#### Steps

* create project directory: `vue init webpack-simple vuetaocharts`

* change into newly created directory `cd vuetaocharts`

* put `*.vue` files into `src/components`

* use `index.html` instead of the newly created one

* use `src/main.js`  instead of the newly created one

* install dependencies with `npm install`

* serve with hot reload at `localhost:8080` with `npm run dev`

* or build with `npm run build`

lastly

* use `webpack.config.js` (provided by this repo as an example, adapt to your needs)

For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## Part two (Contao)

See https://github.com/fiedsch/vuetaocharts-ce

### TODOs

* separate the library code (i.e. vue.js) from the bundled code created by webpack.

  vue.js then has to be included in the Contao page layout (Idea: or by checking an

  option in the content element. Maybe not so good. Consider the following situation:

   we have more such elements on a page and only one of them includes vue.js.

   If this element gets deactivated it breaks the other elements).

* create the `.js` files for the Vue components. Apart from the possibility to manually

  write these find a way to use the single file components we already have.

  bundle the `js` file(s) located in `dist/js` (created by `npm run build`) into one

  `js` file that will be included in a Contao page layout (e.g. `j_vutaocharts.html5`)

  and integrate the required parts from of `index.html` and `main.js`into the new Contao

  component's template.

### Ideas

  * use `` with `stroke-dashoffset` and/or `stroke-dasharray` as an alternative

  to `` (See e.g. https://codepen.io/JMChristensen/pen/Ablch and

  https://css-tricks.com/almanac/properties/s/stroke-dashoffset/)