Logo credits to vuejs.org and golang.org

Social application with Vue.js and GO

Create and serve a twitter like application with vue.js and golang PART 2: GETTING STARTED WITH VUE

This is the second part of this serie. Check here all the parts:

• Part1: Setup
• Part2: Getting started with VUE (this)
• Part3: Components & slots
• Part4: Vuex first setup
• Part5: VUEX finalization
• Part6: Forms and data in Vuex
• Part7: Connection with golang server
• Part8: Token-based authentication
• Part9: Store authentication token with indexedDB

In this lesson we are going to remove most of the code automatically created by the vue CLI, and add a little of our own.

Main target here is to update the frontend project, you can find the code here.

The project structure

Before going on with coding and stuff, let’s review the frontend project structure we are working with. If you followed the last story, or just downloaded the code that was in there, you should find yourself in the following situation

Structure of folders

You should also find a node_modules folder, that actually contains the actual node modules that are installed with npm, and that work “behind the scenes” for us. If you got the code from my repo, just run

npm run install

to add that folder and the dependencies.

I want to point about the more important things here, so going by steps:

• the file package.json contains the configuration of the entire frontend project. Inside of it there is the name of the application we are building, a series of scripts to be used, and the dependencies that the project need to have installed to run. Also, there is a section relative to the dependencies that are used in development time to create the application.
• the “public” folder: all its content will be copied in the build. Here we can find some icons (some default icons by vue, you can change them), a favicon, the robot.txt file and the index.html. This will be actually the real entry point of our application, opening it you can find an html file with some headers and only a single div, with a particular id, “app”. In build time in this file will be injected the scripts we’ll write into the other sections by a component called htmlWebpackPlugin that actually does it for us behind the scenes.
• the “src” folder: contains all the javascript code, managed as we prefer, but there are some “best practices” we’re going to follow for this.

The application code of a vue project

The “main.js” file is the one that “start” the vue application, creating a Vue instance, via the following code (I removed some parts that are not rilevant right by now)

Note: if you are using Vue 3 this file could be a little different

This code imports vue, and then from the file “./App.vue” it imports the “App” component. It then create a new Vue instance and pass it a configuration object with only a “render” parameter: this is a function that says the browser to load and render the actual “App” component. After the instance is created, it mounts it in the html in the node with id “app” (that is, as we seen before, in the index.html file).

In this way, all the content of the “app” node is actually “controlled” by the vue instance and it’s content derives from what we will write in the “App” component, that is, actually, in the App.vue file.

But what is a component?

A component is the foundamental building block of a vue application. It includes three principal parts: the html structure, some javascript code, and the css style used (in reality a better definition of a component can be found in the vue homepage, go and check it!).

An important feature of components, is that they can use other components inside them. In fact, the Vue instance is actually a big component, built over the app node, that uses inside other components.

In the project folder we build our application inside files with extension .vue, that will be compiled, build and put together at build time and they will be put inside the javascript code of the application. Note that in the completed build, like this, there will be no trace of *.vue files, but only the bundled *.js ones.

The “standard” structure of a .vue file is the following:

We can see here three differents parts, divided by tags:

1. the template, that contains the html of the page
2. the script, that contains the script that the component should work with (and this should include the export of a Vue configuration object)
3. the style, written with in css. Note, this will be shared among all the application, and normally this is not wanted, so usually the style tag has one more parameter “scoped”, that actually let the style to target only the actual component

The vue files are actually create into the src folder anywhere one would like to, but normally a “best practise” is to have a “view” folder that contains components that are actually “whole page”, and a “components” folder that contains the more little pieces that are used inside the page.

Begin working on our app

After this little briefing, let’s start with writing some code and manipulate the project.

As first step, we’re going to delete most of the application we have already from the vue cli, and then update it with our code. I’d like to start having a page where a user can see a list of posts, with a top application bar where there are some menu items that will do some navigation between the pages.

Delete all files inside the “components” folder, and also the “Home.vue” file inside the view folder. What we are going to do is actually replacing it with a Posts component that will show all posts.

Next step, create the file “Posts.vue” in the view folder (this will be a page so we put it here) and here insert the structure we said before for a vue file. Thinking ahead, in other pages we will also want to put some list of maybe different, filtered posts… So we are going to use a component called “PostList” in it, that will be reusable in other pages too.

Create then also a file “PostList.vue” in the components folder (with the same logic as before) and, just to fully use the separation and reusability of the components, create also a SinglePost.vue component inside that folder, that will contain the code and the visual referred to a single post.

Let’s start filling the code in the Posts.vue component with this:

The style tag is empty right by now, then we can omit it.

In this code we can see the first important configuration option: data. Data is a configuration function that has to return an object filled by the actual data that is going to be used in the component. In this case, I just put in this object an array ‘posts’ of post-like fake objects. In future this will be populated from a server, but right now this is perfectly fine.

Before of the data option, there is the “components” one. This is an object containing all the sub-components that are used inside this actual one. In this case, for example, we are going to use the “PostList” component. Of course, this cannot know where to go to search for this component, so we have to import it by

import PostList from "../components/PostList.vue";

This is all there is to say about the code configuration options.

We are instructing vue with knowledge about some data, and also that we are going to be using somewhere one other component.

In the html template we can find the link with these two parameters: inside this we have set a root div with a class equal to “posts”, just to have a single root (actually, in vue 2 the template have to be single-rooted, this is no longer true in vue 3, so there you could also omit this), then set a title “Posts” and then a tag <post-list> with a strange parameter :post=”posts”.

This is actually the more important part for this page: post-list is actually the PostList component (vue actually can do this translation for you, for coherence with the html standard that is not camelcase), but then it comes the parameter. The : before the parameter name is actually a shorhand for “v-bind:” (so you could also write <post-list v-bind:posts=”posts”>) and that is a vue directive that link the actual value of the parameter with a value described in the script data option, in this case with the posts value. This creates a dynamic binding with the value, this means that if for any cause the value in the array should change, also the rendered value would do.

Next we are going to implement the PostList component, that will receive this posts and display them:

The script part is actually really similar to before: it imports the SinglePost component and declare it in the configuration object.

The new option that we can see in this file is “props”: here we define all the values that can be passed to this actual component from other “father” components as parameters. So in this case, we say that if any component uses “PostList”, it can set a parameter called “posts”.

In the template section there is the tag “single-post”, that will be the component that shows a single post. Inside this tag, there is a new construct of vue, that actually cycle between groups of data, the “v-for” construct. The syntax of the v-for is actually really simple: v-for=”element in listOfElements” : vue will dynamically and automatically multiply this tag for each element in the listOfELements, or, in our case, for each post in the posts array.

The second parameter we can see is :key (again, the : is for v-bind). This is actually a parameter of the v-for, that lets vue to identify what is actually the data that can change inside each instance of the cycle.

The :post ending parameter is for the actual SinglePost that will get it as a prop. Note that this last parameter takes the output value of the v-for loop, with a name that is actually the one created there.

Finally, note that we can use the v-bind directive on a prop just as we used it with the data option before.

Finally, we can write the SinglePost code like this:

This is not going to use any other component right by now, so no import statements here.

There is only the definition of the “post” prop, and then we have another new configuration option: methods is actually an object that contains a serie of javascripts methods that can be called, here we have set a method “postTitle” that receive a post and returns a representative title about it.

In the template we can see how we can render in the html the value of the data we have in our component: we can use the {{ value }} syntax, where “value” is actually a javascript string object that will be rendered. We can also pass methods here, as postTitle(post), and at render time this will be called (and will also be called, and so can change, anytime anything is changed in the component values).

Actually if you have already worked with vue you’ll wonder why I’m not using a computed property here, that is because after I’ll use this method also for the comments title, and didn’t want to create a “comment” component, so this will be ok.

With all of this settled, we have to change a little the router.js file to make sure that the application is pointing to our pages. We haven’t talked about router until now, we’ll do in some next lesson, so for now just copy the following code in it (we actually just replaced the Home vue CLI created component with our new Posts one):

And finally, we create the vue component for the application bar that will do the navigation. In ‘./components’ create a new folder “UI” and there add a file “TheApplicationBar.vue”:

Here I just added a little of css style so the application bar can stay on top and remains over everything. Note that the scoped parameter lets this style to be only used for this component.

Regardint the code: the data option returns a list of “link” object that can be reached and that have to stay in the application bar. These objects contains a name (that is displayed by the application bar) and a “to” parameter, that actually contains the name of the router page where we want to route (more about this in one of the next lessons).

In the template there is only this “router-link” new tag, that is actually a link that routes the navigation using the router to the page named by the “to” parameter.

We want this “to” to be dynamically selected by the data option in the scripts, so we use the v-bind here, too.

We also added a “LOGIN” button, but for now this is not going to do anything.

Last thing to do for this application is to glue everything together, by putting this application bar inside the App.vue file, and removing anything else inside it:

This should be clear by now, the style here is actually not scoped, so it will be used in all the application, and center everything a little bit.

This page uses only the application bar component, the only new thing is the “router-view” tag: this actually just shows the actual router selected view, so i.e. if one click in the application bar for the posts link, the router select that view and here it will be shown.

After this, you can actually test the application by running

npm run serve

and opening the browser at http://localhost:8080.

In the next lessons we’re going to add some other functionalities at the frontend only application, and learn a little more about vue. After we’ll have a little functioning frontend, we’ll go to the backend, to store and retrieve all the data from it.