Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theotherzach/zero_to_vue
https://github.com/theotherzach/zero_to_vue
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/theotherzach/zero_to_vue
- Owner: theotherzach
- Created: 2016-04-24T18:39:50.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-04-24T20:14:05.000Z (almost 9 years ago)
- Last Synced: 2024-12-25T07:26:10.916Z (about 2 months ago)
- Language: Ruby
- Size: 10.2 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Zero to Rails & Vue
This is the Day 1 for a 5 day JavaScript & Rails workshop.
## Instructions
+ Clone this repo & run bundle install
+ Install [vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) if you haven't already.
+ start the rails server
+ `open localhost:3000`
+ Use the videos & wireframe to complete the goals
+ Complete the bonus goals if you wish
### Goals
[Presentation](hybrid-rails-code-platoon-1.pdf?raw=true)
+ Follow the videos to create a vue-alert component
+ Use what you've learned to create a vue-show-more component
#### Video 1: [Include Vue.js in a Rails App](https://youtu.be/HcL2jjen61o)
#### Video 2: [Extract a Component](https://youtu.be/wrB-0XvFYDc)
#### Video 3: [Bring that Component to Life](https://youtu.be/RPpTQKxoEPI)
### Bonus Goals
+ Research how to add animations and transitions to Vue's v-if
+ Add a subtle fade out effect when the alert is dismissed
+ Add a slide up and slide down effect when the show-more component is toggled.
## Rails & Vue Cheatsheet
See also the product-detail-prototype branch for specific examples.
### file boilerplate
```javascript
// All javascript files start with this
;(function () {
"use strict"
})();
```
### Add vue to the project
```
vendor
└── assets
├── javascripts
│ └── vue.js
```
In application.js
```
//= require vue
```
### Boot the main Vue app
```javascript
// app/assets/javascripts/main.js
;(function () {
"use strict"
$(document).ready(function () {
new Vue({
el: "body",
data: {}
})
})
})();
```
### Add a Vue component
```html
<div class="alert" v-if="isDisplayed">
<button class="alert__close" aria-label="Close" v-on:click="dismiss">
<span aria-hidden="true">×</span>
</button>
<strong>Did You Know?</strong>
This is a free shipping weekend!
</div>
```
```erb
<%# in app/views/pages/home.html.erb %>
<%= render partial: "vue_templates/alert" %>
```
```javascript
//app/assets/javascripts/components/alert.js
;(function () {
"use strict"
Vue.component("vue-alert", {
template: "#alert-template",
data: function () {
return {
isDisplayed: true
}
},
methods: {
dismiss: function () {
var self = this
self.isDisplayed = false
}
}
})
}());
```