vueonrails / vueonrails Goto Github PK

Would love to see some documentation for this.

Also, is this project being maintained?

Thanks.

Can I simply install webpacker and vue and have the features of vue within my rails project without this gem ?

How exactly is this gem helpful ?

I am asking only to understand and to make the best use of it.

When I try on an existent app:
rails vue:setup

and is giving this error

`
You are using Vue on Rails 1.0.0.beta5 and it does not support webpacker 4.

Please use the latest Vue on Rails (1.x) in your Gemfile:
  gem 'webpacker', '~> 4.x'
  gem 'vueonrails', '~> 1.x'

or switch back to webpacker 3:
  gem 'webpacker', '~> 3.x'
  gem 'vueonrails', '~> 0.x'

ruby '2.5.3'
gem 'rails', '> 5.2.3'
gem 'webpacker', '> 4.x'
gem 'vueonrails', '~> 1.x'
`

My vue entrypoint js file that creates my vue component is surrounded by the code

document.addEventListener('turbolinks:load')

and this works fine in development mode but on production model the vue component is not created and I see a blank screen. But if I change that code to:

document.addEventListener('DOMContentLoaded')

then it works (vue component template is rendered) in production but in development it is only loaded first time but when I navigate to other parts of the site and come back the vue component is not rendered blank screen).

Is there something wrong with my code or turbolinks settings? Why does turbolinks:load not work in production?

I am using vueonrails version 1.0.0, rails 5.2.2

The workaround is to create the file, add config, etc.

echo {} >> .babelrc

Not sure if this is a vueonrails error since the error comes from Thor:

Thor::Error: The file /Users/rlafranchi/projects/vue-on-rails-scaffold/.babelrc does not appear to exist....

In my erb I am calling a component department like
<%= vue_component, 'department', name: @department.name %>

How to test department component? Currently my jest test fails saying "erb is not defined". Is there any way to mock the call to erb function?

Hey Bryan 👋

the rails core team is currently in preparation for Rails v5.1 with support for yarn and webpack lately.

It seams you're experienced with Vue.js and integrations with rails apps in general. With all your knowledge, do you think it's possible to also promote Vue.js within webpacker task, like DHH did with this presets tasks to use react.js.

I guess this would be make a lot of buzz and would be a great way to promote Vue.js 💪 with the next Rails update.

Please Update this gem to Vuejs library version 2.1.3.

	window.onload = function() {
			new Vue({
				el: "#app",
				template: "<div>{{message}}<br><dd/></div>",
				data: {
					message: "adfadf"
				},
				components: {
					"dd": {
						template: "<h1>{{message}}</h1>",
						data: function() {
							return {
								message: "hello world"
							}
						}
					}
				}
			})
		}

其中的dd标签变量，在执行后，不会显示。
如果是程序设计里面有关键字的话，是否还有其它的标签也会这样不显示？

Hi,
I've used the https://vueonrails.com/vue template to create a new project
Then after running rails vue:ssr, placed <%= render_vue_component "component.js" %> in the index.html.erb view .

No component is rendered on the page and all I get in its place is something like this:

<div data-hypernova-key="componentjs" data-hypernova-id="0fa5b134-2166-47f1-a4fd-fd337ff3962f"></div>
<script type="application/json" data-hypernova-key="componentjs" data-hypernova-id="0fa5b134-2166-47f1-a4fd-fd337ff3962f"><!--{}--></script>

Are there any other steps required to be able to render components using Hypernova with vueonrails ?

rails vue:setup
Error: Could not find "/home/marcel/.rvm/gems/ruby-2.6.3/gems/vueonrails-1.0.0.beta5/lib/installs/../generators/templates/i18n/index.js"

Path is: home/marcel/.rvm/gems/ruby-2.6.3/gems/vueonrails- 1.0.0.beta5/lib/installs/../generators/templates/I18n/index.js (capital I in i18n)

Alt. install solution?

Webpacker 4 ships with babel.config.js and this is a breaking change for 3rd party webpacker library like @vueonrails See rails/webpacker#1822

Im running my application on Heroku and the environment is "Production" but im getting this warning

application-56fe55e….js:5 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

This gem support server side rendering with vue components?

Hello.

When I trying to implement a custom select, whose value is binded with data object, $watch behaves differently: direct attribute watching work properly, but deep watching the whole object gives another result with same values of curr and prev.

https://jsfiddle.net/netstuff/Le5v1dm9/8/

Is this normal?

Sprockets::FileNotFound: couldn't find file 'vue-validator' with type 'application/javascript'

When calling vue_component in my erb, can I pass it a AR model instance: e.g.

  <%= vue_component 'project', project: @project %>

I tried but it did not work as to_json is called on @project and since it is unescaped, that markeup generated does not have all data . This works

  <% vue_component 'project, {name: @project.name, status: @project.status } %>

but I need to make erb call (in project.vue) for both name and status and also how do I handle associations, e.g. project has many employees and each employee has a first_name and last_name. Do I need to have a component for employee and call vue_component for each employee in a loop ans pass employee component?

https://github.com/vueonrails/vueonrails/blob/master/docs

Bug

Hi, when I hover on notified button, button text color not changed.

See image:

Is that intentional?

If anyone wants to take first stab cc @m5o @rlafranchi

What is the purpose of the statement isView("###") in the vue component with turbolinks support? What do I need to make sure is present in my erb markup to work with this?