{"id":14955617,"url":"https://github.com/multpix/rails-wp-vue","last_synced_at":"2025-10-01T18:31:49.469Z","repository":{"id":96750565,"uuid":"94698047","full_name":"multpix/rails-wp-vue","owner":"multpix","description":"Пример простого Rails приложения с webpacker и Vue.js","archived":false,"fork":false,"pushed_at":"2017-06-18T17:31:03.000Z","size":124,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-14T11:21:40.339Z","etag":null,"topics":["es6","heroku","pug","rails5","stylus","vue","webpack","webpacker"],"latest_commit_sha":null,"homepage":"http://rails-wp-vue.herokuapp.com","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/multpix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-18T16:05:23.000Z","updated_at":"2021-12-21T15:43:33.000Z","dependencies_parsed_at":"2023-04-20T14:32:56.026Z","dependency_job_id":null,"html_url":"https://github.com/multpix/rails-wp-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-wp-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-wp-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-wp-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multpix%2Frails-wp-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multpix","download_url":"https://codeload.github.com/multpix/rails-wp-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234726143,"owners_count":18877489,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","heroku","pug","rails5","stylus","vue","webpack","webpacker"],"created_at":"2024-09-24T13:11:27.361Z","updated_at":"2025-10-01T18:31:49.049Z","avatar_url":"https://github.com/multpix.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Пример простого Rails приложения с webpacker и Vue.js\n![Rails worked with vue](https://github.com/multpix/rails-wp-vue/raw/master/rails-wp-vue.png)\nИнициализация приложения\n```bash\nrails new rails-wp-vue --webpack=vue\n```\n\nВ приложении присутствует пример конструктора vue и однофайловый компонент\n\nДля удобства компонент перенесен в каталог `javascript/components`\n\nИмя точки входа изменено на `packs/vue.js`\n\nДля примера создана главная страница `rails g controller front index`\n\nВ корневой шаблон `layouts/application.erb` добавлены вызовы:\n```erb\n\u003c%= javascript_pack_tag 'vue' %\u003e\n\u003c%= stylesheet_pack_tag 'vue' %\u003e\n```\nубран turbolinks (который так-же удален из `Gemfile`,\nи из `app/assets/javascript/application.js`)\n\nВ `Gemfile` добавлен `gem 'foreman'`\n\nСоздан `Procfile`\n```ruby\nweb: bundle exec rails s\nwebpacker: ./bin/webpack-dev-server\n```\n\nЗапуск приложения:\n```bash\nforeman start\n```\n\nТеперь работающее приложение доступно по адресу `http://localhost:5000`\n\nПри изменении и сохранении js происходит перезагрузка соответствующей вкладки браузера\n\nДля добавления js пакетов `./bin/yarn add stylus stylus-loader pug pug-loader`\n\nСоответсвующие загрузчики в `config/webpacker/loaders`:\n```javascript\n# config/webpack/loaders/pug.js\n\nmodule.exports = {\n  test: /\\.(pug|jade)$/,\n  loader: 'pug-loader'\n}\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\n\n# config/webpack/loaders/stylus.js\nmodule.exports = {\n  test: /\\.styl$/i,\n  use: ExtractTextPlugin.extract({\n    fallback: 'style-loader',\n    use: ['css-loader', 'postcss-loader', 'stylus-loader']\n  })\n}\n```\n\nИспользование в однофайловом компоненте:\n```vue\n# app/javascript/components/app.vue\n\n\u003ctemplate lang=\"pug\"\u003e\n  #sample_vue_app\n    p\n      |{{ message }}\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data: function () {\n    return {\n      message: \"Hello Vue!\"\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"stylus\" scoped\u003e\np\n  font-size: 2em\n  text-align: center\n\u003c/style\u003e\n```\n\nДополнение для удобства разработки и отладки:\n[Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)\n\nВыгрузка на Heroku\n```\nheroku create rails-wp-vue\nheroku buildpacks:add --index 1 heroku/nodejs --app rails-wp-vue\nheroku buildpacks:add --index 2 heroku/ruby --app rails-wp-vue\nheroku addons:create heroku-postgresql:hobby-dev --app rails-wp-vue\ngit add -A \u0026\u0026 git commit -m \"deploy\" \u0026\u0026 git push heroku master\nheroku open \u0026\u0026 heroku logs --tail\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultpix%2Frails-wp-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultpix%2Frails-wp-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultpix%2Frails-wp-vue/lists"}