# Vue

Gracias a Webpacker y [Potassium](https://github.com/platanus/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?:
‣ Vue
  Angular
  None
```

En el caso que tengas que agregar Vue a un proyecto Rails 5 que ya fue inicializado, puedes usar webpacker para configurarlo:

```bash
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_eval
  else
    policy.script_src :self, :https
  end
end
```

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' %>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://la-guia.platan.us/setup/configuracion_de_proyectos/vue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.