Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Small issue with javascript snippet in your PDF #1

Open
ezraball opened this issue Oct 14, 2019 · 1 comment
Open

Small issue with javascript snippet in your PDF #1

ezraball opened this issue Oct 14, 2019 · 1 comment

Comments

@ezraball
Copy link

Hi, thank you so much for putting this together. It's helped me immensely!!

I banged my head against this for a while but following one of your links to here: https://mkdev.me/en/posts/rails-5-vue-js-how-to-stop-worrying-and-love-the-frontend I realized what was going on.

I believe the javascript snippet on Page 3 should actually be this:

// app/javascript/packs/application.js

import Vue from 'vue'
import App from '../components/app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const app = new Vue({
    el: 'app',
    template: '<App/>',
    components: { App }
  })

  console.log(app)
})
@davidlbean
Copy link
Owner

Hey Ezra -- thanks for letting me know it was helpful!

Oh, and you're note about my code is a good one. I forgot I was using a little trick I picked up from Chris Oliver over on GoRails. Yes, it's true -- my application.js doesn't create the Vue instance and try to attach it to the app element. It looks like it's attaching it to some weird 'div#vue-target' element. The code is actually ok, but I forgot to point out how it works. Basically, the code will just look for any instance of 'div#vue-target' and you can sprinkle those divs in the pages that you need them...I just put that div in my application.html.erb template like this:

  <body>
    <div id='vue-target'>
      <%= yield %>
    </div>
  </body>

When application.js runs, it creates the Vue instance and attaches it to the

that surrounds the yielded template. Sort of the same thing as the approach you point out. This GoRails approach gives me the ability to apply Vue only to the pages I want, even though I'm applying it to every page via the application template...which, I know, doesn't help my argument, eh?

In any case, thanks again for letting me know you saw the code!

  • David

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ezraball @davidlbean