https://github.com/jendiamond/rails_vue_todo

First Test for Blacklight App
https://github.com/jendiamond/rails_vue_todo

Last synced: 7 days ago
JSON representation

First Test for Blacklight App

• Host: GitHub
• URL: https://github.com/jendiamond/rails_vue_todo
• Owner: jendiamond
• Created: 2018-09-28T23:31:14.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-01T18:20:41.000Z (about 6 years ago)
• Last Synced: 2024-10-09T01:40:23.924Z (about 1 month ago)
• Language: Ruby
• Size: 81.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# README

+ Ruby version 2.5.1

+ Rails ~> 5.2.1

https://www.udemy.com/ruby-on-rails-react-angular

#### rails g controller Welcome home

+ update config/routes

```

Rails.application.routes.draw do

  root 'welcome#home'

  get 'welcome/home'

end

```

`bundle`

#### yarn add vue

`yarn install`

### Add Vue

#### Create a new file

**`app/javascript/packs/app.js`**

```

import Vue from 'vue';

```

**`app/views/layouts/application.html.erb`**

```html

  

    RailsVueTodo

    <%= csrf_meta_tags %>

    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application' %>

    <%= javascript_pack_tag 'app' %>

  

  

    <%= yield %>

  

```

### Config Vue

**`config/webpack/custom.js`**

```

import Vue from 'vue';

```

---

#### Create a new Rails app; adding webpack and skipping coffeescript and turbolinks. Then stop the Spring server.

$ `rails new task-manager-app --webpack --skip-coffee --skip-turbolinks

cd task-manager-app`

$ `spring stop`

#### Add a new Controller called Welcome with the action `home`

$ `rails g controller Welcome home`

#### Update the `config/routes.rb` to route the opening page to the home page

```

Rails.application.routes.draw do

  root 'welcome#home'

  get 'welcome/home'

end

```

#### Start the app

`rails server`

Load `localhost:3000` in your browser

#### Add yarn and Vue to the application

$ `yarn add vue`

$ `yarn install`

#### Create a new file

**`app/javascript/packs/app.js`**

```

import Vue from 'vue';

```

#### Update `app/views/layouts/application.html.erb` add

```

<%= javascript_pack_tag 'application' %>

<%= javascript_pack_tag 'app' %>

to the   element

```

#### Create `custom.js` in `config/webpack`

Add this to the file:  

**`config/webpack/custom.js`**

```

module.exports = {

  resolve: {

    alias: {

      vue: 'vue/dist/vue.min.js'

    }

  }

}

```

#### Update `config/webpack/environment.js`

```

const { environment } = require('@rails/webpacker')

const customConfig = require('./custom')

environment.config.merge(customConfig)

module.exports = environment

```