Gracias a Webpacker y Potassium es muy fácil empezar a usar Vue junto con un proyecto nuevo de Rails.
> potassium create PROYECTO_DE_RAILS[...]Which front-end framework are you going to use?:‣ VueAngularNone
En el caso que tengas que agregar Vue a un proyecto Rails 5 que ya fue inicializado, puedes usar webpacker para configurarlo:
bundle exec rails webpacker:install:vue
En Rails 5.2+ hay que configurar el ambiente de desarrollo con lo siguiente:
config/initializers/content_security_policy.rb
Rails.application.config.content_security_policy do |policy|if Rails.env.development?policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'policy.script_src :self, :https, :unsafe_evalelsepolicy.script_src :self, :httpsendend
Una vez instalado, la estructura inicial del proyecto será la siguiente:
app/javascript:├── packs:│ └── application.js└── app.vue
views/layouts/application.html.erb<%= javascript_pack_tag 'application' %><%= stylesheet_pack_tag 'application' %>
Webpacker funciona con packs, siendo cada "pack" un bundle de código independiente generado por webpack. En este caso, agregando las tags de arriba la aplicación de Rails va a tener acceso al compilado de todo lo importado en application.js
y el scss
generado a partir de los archivos .vue
.
En un proyecto más avanzado esta sería una estructura ejemplo:
app/javascript:├── main│ ├── api│ │ └── form-api.js│ ├── components:│ │ ├── sidebar.vue│ │ ├── main.vue│ │ └── footer.vue├── shop│ ├── api│ │ └── cart-api.js│ ├── components:│ │ ├── cart.vue│ │ └── cart.spec.js│ ├── store:│ │ └── index.js│ │ └── modules│ │ ├── cart.js│ │ └── cart.spec.js└── packs:├── main.js└── shop.js
views/layouts/application.html.erb<%= javascript_pack_tag 'main' %><%= stylesheet_pack_tag 'main' %>
views/layouts/shop.html.erb<%= javascript_pack_tag 'shop' %><%= stylesheet_pack_tag 'shop' %>