Vue for inexperienced web programmers

I have been a programmer for over 30 years, but am relatively inexperienced in web applications. I have done a lot of research and thought Vue.js 2 seemed to be an interesting framework for web development.

I am primarily interested in developing complex enterprise applications.

I have started developing using the vue-cli template (?) and feel like I’m drowning. Here are my main issues so far:

  1. There is no clear “for dummies” structure of how Vue.js works, like so:
    index.html -> this is the first thing your browser sees. It then loads…

main.js -> This is where the Vue object is created (?), which is accesible in the following scope(s): xxxxx, xxxx

router/index.js -> This is where modules relate to each other (?). The router object in every app is a) a reference to the main route object b) each component has its own copy of $route

…and so on

This is important because from the Vue.js documentation there’s no clear way to understand objects structure and scope. Which leads me to my next issue:

  1. Vue.js obviously does not provide every possible functionality necessary for an application, so I’,m sure there’s a reasonable way for inspecting and manipulating DOM elements, but it’s been a week of frantic googling to no avail. If Vue.js doesn’t like that, I’ll probably need to look elsewhere because I’m very anal about how things need to behave in my apps and usability to me is very important.

Here’s one example: I have App.vue, where my main navigation menu is, which calls Login.vue, and every time Login.vue is shown I want the focus to go to the Element UI input for the user email. I’ve read about using “directives”, but no one tells you where to put them. I’ve tried main.js, App.vue and whatnot, but nothing works. Some people say it’s easy to use this.$refs..focus(), but I haven’t been able to make that work either. Maybe I’m stupid? That sure is how it feels like.

  1. Debugging apps has been a nightmare, all I see is endless one-line “evals”, and the chrome extension has very, very little information. Is there a better way?

  2. So am I using the wrong starting point? Should I use a different template/boilerplate/scaffold other than vue-cli? Can anyone recommend me one, keeping in mind that my main target is enterprise web applications?
    Also I’m currently using Element UI and, for lack of a better alternative, VueResource for backend access. Am I missing something that’s important for my purposes?

  3. Just so you don’t think I’m complete idiot, here’s what I’ve done so far:

  • Got the Element UI menu working with the router
  • Login works, with JWT authentication using a php backend
  • Per-request authentication works, even though I wasn’t able to set the global http header for the JWT token
  • Navigation works well, aside the fact that I can’t focus on the inputs I want whenever I show the login or new user components.

Thanks!

4 Likes

Answers for some of your questions:

1, debugging: enable the source map in webpack config, such as devtool:"cheap-module-source-map". Then you can debug your source code in the tab sources in chrome devtool panel. Break in runtime wherever you what.

2, How the code works: You may need to learn webpack first. and the structure of the files is not fixed. Maybe there should be a readme for beginners.

3, Directive’s doc is here. Two way to define, global and scoped.

4, For auto focus feature. just Google vue auto focus

It sounds like you’re jumping from nothing to complex enterprise applications pretty fast, and that’s causing problems. (And that is meant to insult the state of web development, and not 30 years of programming experience!)

Web development is a precarious tower built with hacks meant to hold together a million broken pieces. Everything you do is abstracted so much that it’s tough to figure out what piece is doing what.

Anyway, I agree with you that there is a lot of mystery left unexplained to the complete beginner. As an experienced programmer you might find it easier to dive into the source code to find out what’s happening. This post I wrote on Vue.js testing talks about should give you a good starting point. I’m also writing a long tutorial series about building a mid to large scale Vue.js application that will hopefully be finished soon.

My recommendation for you is to build something smaller first before going into a full scale application. Start without a vue-cli template, don’t use element or a bunch of other dependencies. You can just import Vue.js directly. After the testing article read up more on webpack, babel, and es6. That will help you understand what happens when you hit npm run dev. The application structure is not actually controlled by Vue, but by the template vue-cli loads. Look into that code, and some of the Vue demo apps.

Refs are a registry of child components and elements. To focus on an element you need to reference the actual element object so you can call its .focus() method. With Vue you probably need to do this using refs. If something isn’t working after reading the documentation, post your autofocus code so we can try to help troubleshoot.

1 Like

Thanks for the reply chai!

Since I’m using the template generated by vue-cli, turns out I already had cheap-module-source-map enabled and was actually looking at the wrong place, once I looked under the webpack tree in devtools source the original code was there and I was able to set breakpoints and examine variables, which is a huge step forward for me.

I’ll take a look into webpack, seems I have a whole lot of learning to do.

Installed v-auto-focus and it actually works! It’s a bit annoying having to include a data-index attribute in each control tag under the v-auto-focus block but that’s a small price to pay to have focus working. IMHO this should be included in Vue.

Again, thank you!

Wow, thanks for confirming my suspicions and that I’m not crazy or a moron matthias LOL

Actually I’ve solved the focus problem with the help of v-auto-focus as per chai’s recommendation above, but I was really intrigued by the fact that even after setting ref attributes - and now I see they’re set because I’m finally able to inspect variables, also thanks to chai’s advice - I can’t seem to find a way to include a “set focus” call every time a certain component is shown. My $router object is accessible from the main App.vue, and “watch” functions work perfectly well there, but not in my other components; if I try to reference a ref that’s in, say, Login.vue from a $router watch function in App.vue it says it’s undefined.

Side question, did you guys replace VueResource with Axios? Should I?

I appreciate the advice on trying things with a simpler setup, but to be honest I’ve put myself to the challenge on purpose, because in my experience the more I suffer the faster I learn. I could use two approaches on this, 1) like you’ve suggested start simple and then learn how to build complex stuff little by little; or 2) take the crash route and learn faster hopefully. I’ve chosen the 2nd, time will tell if I’ve made the right choice.

Looking forward to your tutorial series on building Vue.js apps, and thanks for helping me out!

Disclaimer: Core team member here.

Sorry to hear that you have hard time to pick up Vue.

But honestly, I think you are expecting a bit too much. You are basically trying to learn

A) the general basics of web development and
B) the use of a specific library

at the same time.

So get stuck, because you don’t find any information about A) in B)'s documentation. But providing information like this in the documentation of our library (and likewise, in the documentation of every library like Vue, because maybe you want to learn React or Angular or ‘insert random framework here’ tomorrow) can’t be the job of the developer team.

It would be a monumental task (and frankly, a huge waste of reources) to explain the 101 of web development in the documentation of every library out there. So we have to assume a certain level of familiarity with web dev in general, the npm ecosystem, how to structure JS code, some basic kowledge about codnig patterns in JS etc.

(That doesn’t mean that there are no resources out there - there’s tons of books and websites that explain all of this.)

Linus, not to be rude but I’m not expecting anything, I’m asking for help, and if you re-read your reply, you’ll probably realize you didn’t really offer any, sorry if I’m being too blunt.

There’s two ways a core development team member can look at my post: either an annoying n00b asking stupid questions, or an opportunity to understand how the learning curve is for someone who is a newcomer to Vue.js and to a large extent to web technologies, and maybe make some improvements in the documentation. Personally I would choose the second one, but to each their own.

Also consider that the vast majority of examples out there is still for v1, while I’m making an effort to go directly to v2 in spite of that, which is an added point of difficulty. And by the way I’d add another item to your bullet list, because besides “A” web development and “B” Vue.js I’m also learning how to use component libraries that complement Vue.js into a full framework. And believe it or not, I’m thinking I’ll probably learn all of this stuff in a few weeks.

Anyway I’ve already got a lot of help from the other replies in this thread, enough to bump my skills to the next level in a few days of studying. Should I refrain from asking questions here on the forum until I’m more knowledgeable in Vue.js and web development in general?

3 Likes

Wow, it was not my intention to come across as condencending or anything, sorry if that was the case! :frowning:

It also seems I may have misunderstood parts of your post such as this:

Which basically, to me, read like “I expeced to find this, but it’s not there.”

I now see that this was not how you meant it, so once again, sorry.

And of course you should continue asking questions! If you look at my post history on this forum, you will see that I answer pretty much everything, and don’t consider it “beneath me” to answer the same “noob” questions over and over.

The reason I didn’t provide specific help to your questions is that they were a little too broad to write down a quick answer, and the specific parts had already been answered anyway. My intention was to “warn” you that you will be out for a bumpy ride with that “all-in” approach, and that the Vue docs can’t be of too much help there, but as it seems you are ware of and fine with this, my post was probably unecessary.

So, if you have any other concrete questions, please ask - for different topics, consider opening a new thread (so topics stay isolated) and i’ll be glad to help

2 Likes

If you want a Vue for Dummies tutorial, have a look at this.

Unfortunately, it is currently at full price. Udemy often has sales though, where the price is dropped considerably. I only paid $15 for the course and it is excellent.

Scott

@smolinari curiously, on my end it’s on sale righjt now. Probably different sales periods for different countries or something?

I strongly recommend the video series from Maximilian Schwarzmüller (the Instructor from udemy, aka Mindspace on YouTube) about VueJS 2 - for free :grinning:
This guy is excellent !!

https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w/videos

That is interesting @LinusBorg. Maybe the OP will also get a good deal.

Scott

Unfortunately it’s at full price here, but I’ve already got more from this thread than I was expecting, thanks everyone!

@LinusBorg no worries, I’ll keep posting and who knows, might even contribute in the future.

Cheers

Hi Deny,

I was in a similar situation about 2 months ago.

Needed to develop a complex single-page app after being away from JavaScript for several years.

Looked at Angular/React/Vue and picked Vue because it seemed like less of a learning curve, and I have schedule constraints. My timing was such that I started with Vue 2 - didn’t have to deal with 1.x/2.x migration.

My advice: ditch the complex toolchains and just write all your html and code in one file. Much easier to understand what’s going on. It only took me a few days to get a basic feel for things.

After two months, I’m pretty solid on vue. (i.e. I could answer most of the questions that come up here.)

My opinion of Vue at this point is that it is an amazing piece of work - I plan to use it in several other projects.

Good luck!

1 Like

Hey vueser, thanks for your reply, I think I’m getting the hang of it and am already building my app at a reasonable pace. :slight_smile:

1 Like

@Deny You’re not alone :slight_smile:
I picked up Vue recently and wanted to find out how things work… which is not easy, if everything gets wrapped in webpack-stuff. I’d rather learn the ‘traditional’ way - linking sources from my main.html and try to understand what happens when.
This way seems very uncommon nowadays, since everybody seem to install npm, add some modules and use it -> but I wanted to ‘learn’, how things work first.

It took me ages to find out how to link npm-modules directly from my main.html, because that seems not to be documented anywhere (at least I didn’t find it, yet).

It’s also not so easy to find out how to create dynamic widgets (e.g. a weather-widget, or twitter-widget, etc…) and if it’s better to create a new instance of vue with every widget or just drop the widget into the running instance… (no clues, yet - but I’m still a noob, so that’s okay ;))

Anyway, I’m completely with you that documentation lacks fundamental development points (and I’m doing web-development since years). Looking at knockout.js or similar libraries they have very good documentation, how to start and create a web-app from scratch. Vue’s documentation is quite good, if you already know the fundamentals, but really lacks hands-on how to create a (more or less complex) app from scratch and how to create components for it - outside npm. (please forgive me - I don’t want to offend anyone, just in case… ;))

While I totally understand how npm and webpack helps creating solid applications, I’d rather wish there was some more information how to use vue from a more traditional setup.

Maybe I just didn’t find it yet - so any help/info in this regard is much appreciated as well!

Cheers

Andy
BTW: From what I found and tried out so far, Vue is really extremely cool! Love it!!! :+1:

1 Like

Hi!

I’m sorry our documentation wasn’t as helpful for you as we intend it to be. Could you go into a bit more detail as to where you got stuck or missed some vital information to get you going?

While I don’t doubt your experience, I have a hard time to see it from this perspective. If I look at our documentation, the only chapters where we even talk about webpack et.al. are these ones in the “advanced” section:

  • “Single File components”
  • Production Deployment Tips
  • Server-Side-Rendering

The whole “Essentials” section as well as the rest of the “Advanced” section has absolutely nothing that relies on npm, build tools or other of the “new, hip stuff”. Pretty much the same goes for the vue-router and vuex docs.

Also, all of the Examples work without any build system as well and most would qualify as a “widget” in my book.

So I would guess that your issue is not really with an over-stressing of npm & webpack, but rather something else that is missing even in the “basic” documentation that could otherwise help you to get started better.

It would be very helpful to learn more about what those missing pieces are for you, because obviously, we can be a bit blind to those things as we know everthing about our “baby” inside-out.

/ping documentation-guru @chrisvfritz

@tiptronic, cool that you’re taking the opposite approach than me, it will be interesting to exchange impressions along the way. So far the initial overwhelming impression has faded and like I’ve mentioned I’m finding it relatively easy to progress in Vue.js 2, and fun :slight_smile:

Hi Linus,

thx for your reply and I am really sorry, it seems my post got a bit mixed-up (by myself). The npm and webpack-comments where not meant about the vue-documentation, but my various findings on the web. I should have made that clear - sorry.

Most of what I learned was indeed from your ‘Examples’ section. Which is quite good, but there could be more :wink:

I’m short on time over the next couple of days, but I will collect my notes and post some more details here.

Btw: What was confusing when I started was, that lots of examples found on the web work with Vue 1.x. So when I followed a couple of these tutorials (with vue 2.x linked in my scripts) I at first didn’t realize there was a breaking change from Vue 1.x to 2.x - it just didn’t work. (No problem for someone who KNOWs there’s such a break, but for a newbie it was just not obvious).

And while you mentioned ‘Single File Components’. This is a pretty good example (which added to my confusion), since I couldn’t figure out from the doc, where to put them, if I want to use them without a build-system (which is obviously not possible). In my imagination I thought of components as ‘components’ which I can load at runtime (much like using jQuery’s ‘load’ method), which would be an awesome idea, because I can load my main.html very fast and load the components based on when they are needed (in contrary to bundle everything into my app, which adds to the download-size and loading speed). I think, it would be advantageous to make it clearer, that those components can’t be used on runtime (which imo would be really great).

So again, sorry for the mix-up in my original post and hopefully I could make some points a bit clearer.

Andy