Vue for inexperienced web programmers

@deny Did you finally switch to webpack or do you still link your stuff from your html-page? If the latter: How do you handle splitting up different components/widgets? Write separate JS-classes?

Much appreciated! :slight_smile: Feel free to post those notes directly as an issue on github.com/vuejs/vuejs.org

Unfortunately, I think this is a problem inherent to any softwar that has major updates: Popuplar information on google is outdated, but there’s not much to do in terms of “marking” those entries as being out of date :confused:

Thanks for the feedback, wee will look into how to improve that aspect.

By the way, about “loading components when they are needed”: For .vue files, this is possible very easily with webpack, but Vue has a generic interface to load components asynchronously:

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // in reality, you'd use JSONP / requireJS or sth. to load the component from your server.
   // pass that object to `resolve()`
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

@tiptronic I went with webpack from the very beginning and am still at it, it’s a bit complicated yes but not that difficult to learn. I am happy for now because I haven’t run into any new issues that I wasn’t able to solve, we’ll see how long that lasts haha

@LinusBorg Thx for the hint on async components. That would make another good example for your examples section.

But in an app I’d like to load a .vue component from the server at a later time: E.g. loading a .vue file like ‘http://example.com/test.vue’ via an xhr, like so:

Vue.component('async-example', function (resolve, reject) {
  xhr.onload(function () {
    resolve( xhr.responseObject );
    })
})

but that implies that the ‘async-example’ node already exists in the DOM. If it doesn’t exist (e.g. because a DOM-node is constructed based on another operation, I’d rather use it this way:

xhr.onload = function (xhr) {
  Vue.component('async-example', function (resolve, reject) {
    resolve( xhr.resonseText );
})

or - in an ideal world:

if (userdidsomething) {
  Vue.loadComponent('weather-widget', 'http://www.example.org/myComponent.vue'), function (loadedComponent, error) {
    loadedComponent.title = 'foo';
    loadedComponent.componentFunction('someInputParam');
  })
}

In the final example a user e.g added a weather-widget to the DOM (which didn’t exist before) and then injected the template, etc… into the Vue instance. Vue otoh. tries to load the component from the server, does the heavy lifting, adds the template to the DOM and then I’m ready to use it…

That’s how I understand remote-components when loaded/constructed async at a later point after the DOM was already created.

Does that make sense?

I had faced the same issue a long time ago with Vue, I raised an issue, but it was brushed off, hence, I started writing a tutorial which I intend to finish some time soon.

Spread the word!!

Do not go to using webpack, first learn how to use it by including in <script> tag, if you like Go, you can try, https://github.com/thewhitetulip/Tasks-vue, this is a todo list manager written in Vue without using webpack or stuff

A long time ago, I had faced this same issue :slight_smile:, I think I had raised a github issue and I was told that “docs won’t cover this”, see, this is a problem everyone who is new to Vue faces.

The tutorial I mentioned earlier is now on sale for $10. A steal! But, for only 22 hours of this posting.

Scott

And saying “don’t go the webpack way” is like saying go run a 100 meter sprint, but use crutches. :wink:

Scott

This is incorrect: the resolving will only be called the first time this component is used in you application, in a lazy way. Here is an example.

Hey @Akryum
Cool - that’s very good information! So my assumption was wrong… -> that should make it definitely into the docs
Thank you!!!

Are there any caveats or something to consider??

Booked! Thanks for making this available here!

@smolinari I am on @thewhitetulip’s side… Webpack is really awesome in many cases - but I too prefer to first understand what’s going on. Otherwise it’s a nightmare once you released your app and something doesn’t work as expected…

Btw: Using crutches is not bad for a 100 meter sprint, if everybody else uses crutches as well :wink:

2 Likes

Not to my knowledge, it just should work.

EDIT:

I have just checked the doc and it’s mentioned:

Vue will only trigger the factory function when the component actually needs to be rendered and will cache the result for future re-renders.

I apologize for just now responding to this - I got the notification at a time when a health issue was beginning to severely diminishing my productivity and it slipped through the cracks.

I haven’t read this entire thread, but regarding the general topic of improving the accessibility of the docs for inexperienced programmers, that is something I definitely care about. It’s one reason why Vue’s core docs exclusively use “plain” (i.e. ES5) JavaScript, rather than assuming use of advanced build tools such as Babel and Webpack. I actually don’t know of another JS framework that makes this same accommodation.

There’s a tightrope we have to walk though. We have to assume some level of experience - otherwise, we risk making the guide very tedious for more experienced programmers. I’m mostly satisfied with how we strike that balance, but I think we can do a lot to bridge the inevitable gaps through supplemental material, including:

  • an official style guide
  • a thorough and ever-expanding “cookbook” covering common scenarios, such as the aforementioned jQuery plugin integration
  • informational blog posts, revealing behind-the-scenes information about how Vue chooses to solve certain problems, which can help (especially beginners) learn more about not only Vue, but other tools often used with Vue (like Webpack, for Single File Components)

A big part of my summer is dedicated to expanding all of these resources. By the end, I’d like the Vue ecosystem to be the best place to become a better frontend developer, for every experience level.

1 Like

It’s a part of a huge problem of Vue, which is at the same time the key to Vue’s success and ultimately its best feature - Vue is meant to be used by both noobs and experts and by both websites/webapps developers. So by trying to cater to all these groups, it has to unfortunately compromise a lot on the way. There’s no way to fully satisfy all users who have different priorities.

There’s no workaround for that, so just like Vue has to compromise a lot, I often ask new Vue users to prepare to make some compromises on their end too.

Vue, of all the UI libraries/ frameworks I know of, does a fantastic job of creating documentation at a level where it is understandable for new users, but also useful for experienced users. I agree with Chris that total noobs to such technology can’t be “spoon fed” by the documentation. That would be amazingly frustrating for experienced users and a huge endeavor for those who write the documentation. Thankfully, there are other channels on the Internet to learn more about JavaScript, reactive UI technologies and to learn the basics of Vue too.

Scott

I have a yen to learn Vue-Material and by extension Vue at the most basic of levels. I have had much more success copying and pasting and futzing around to see what breaks in Vuetify however thanks to its pre-coded boilerplates and vue-cli templates.

Vue-Material has good docs with snippets and codepens for each component but where I get lost is in the integration of the Javascript for each of these, or rather, for more than one.

I cannot seem to write a functioning page with, say, drawers and dialogs and accordions at the same time.

This is a modest documentation suggestion then. Provide Webpack project templates with multiple components to illustrate the docs. Include and briefly explain the main.js file. Earn the gratitude of an absolute beginner.