https://github.com/ledermann/docker-vue

Frontend for DockerRails, built with Vue.js
https://github.com/ledermann/docker-vue

actioncable axios buefy bulma jwt vuejs vuex

Last synced: 3 months ago
JSON representation

Frontend for DockerRails, built with Vue.js

• Host: GitHub
• URL: https://github.com/ledermann/docker-vue
• Owner: ledermann
• Created: 2018-02-27T11:09:11.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-10-23T23:50:06.000Z (3 months ago)
• Last Synced: 2024-10-24T13:24:44.210Z (3 months ago)
• Topics: actioncable, axios, buefy, bulma, jwt, vuejs, vuex
• Language: Vue
• Homepage: https://docker-vue.ledermann.dev
• Size: 6.27 MB
• Stars: 85
• Watchers: 6
• Forks: 27
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DockerVue

Single-page application (SPA) built with [Vue.js](https://vuejs.org/). It's is a very simple kind of CMS (content management system) allowing to manage posts (articles) with images.

This is the frontend only. The backend is a separate project called [DockerRails](https://github.com/ledermann/docker-rails), created with Ruby on Rails and responding as an JSON API.

## Tools used

- Project scaffolding with [Vue Cli](https://github.com/vuejs/vue-cli)

- Routing with [Vue Router](https://router.vuejs.org/en/)

- State management for authentication with [Vuex](https://vuex.vuejs.org/en/)

- Package building with [Webpack](https://webpack.js.org/) and [Yarn](https://yarnpkg.com/lang/en/)

- Styling with [Bulma](https://bulma.io/), [Buefy](https://buefy.github.io/) and [FontAwesome](https://fontawesome.com/how-to-use/js-component-packages)

- API calls with [Axios](https://github.com/axios/axios)

- Deployment with [Nginx](https://nginx.org/en/) and [Docker](https://www.docker.com/)

## Features

- User authentication using [JSON Web Token (JWT)](https://de.wikipedia.org/wiki/JSON_Web_Token)

- Infinitive scrolling using [Vue-infinite-loading](https://github.com/PeachScript/vue-infinite-loading)

- Auto refresh via [ActionCable](https://yarnpkg.com/package/@rails/actioncable)

- Searching with [Buefy Autocomplete](https://buefy.github.io/#/documentation/autocomplete)

- Content editing with the WYSIWYG editor [Pell](https://github.com/jaredreich/pell)

- Image gallery with [Silentbox](https://github.com/silencesys/silentbox)

- Uploading images directly to Amazon S3 (presigned by the backend)

## Demo

There is a live demo at https://docker-vue.ledermann.dev/

## Development

First, make sure to get the backend up and running:

https://github.com/ledermann/docker-rails

Make sure the backend is available locally, for example at https://docker-rails.test. Then:

```bash

git clone [email protected]:ledermann/docker-vue.git

cd docker-vue

cp .env.local.example .env.local

yarn install

yarn serve

```

## Why?

I built this application to learn Vue.js.