Listing Blogs in Vue

Image by Gerd Altmann from Pixabay

Scenario

We have the following blog model created in src/model/blog.model.js:

class Blogs {
   blog1 = {
      title: "The First of Many Blogs",
      content: "Welcome to my awesome blog.  Prepared to be amazed."
   };
   blog2 = {
      title: "The Second of Many Blogs",
      content: "Amazed yet?"
   };
    blogs = [this.blog1, this.blog2]
    constructor() {}
}
export default new Blogs();

And we need to iterate over and display these inside our BlogsComponent .

Approach

Setup

Install the Vue CLI:

npm install --global vue-cli

Create the project:

vue init webpack vue-blogs

Say no to linting and tests, and just hit enter for everything else:

? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

Run the app:

cd vue-blogs
npm run dev

Visit it at http://localhost:8080/

Open the Project in VSCode:

cd vue-blogs
code .

Model

Create the folder src/model/ .

mkdir src/model

Then create the file src/model/blog.model.js ( touch src/model/blog.model.js ):

class Blogs {
   blog1 = {
      title: "The First of Many Blogs",
      content: "Welcome to my awesome blog.  Prepared to be amazed."
   };
blog2 = {
      title: "The Second of Many Blogs",
      content: "Amazed yet?"
   };
blogs = [this.blog1, this.blog2]
constructor() {}
}
export default new Blogs();

Blogs Component

Rename the file src/components/HelloWorld.vue to BlogsComponent.vue .

Then go into the file src/router/index.js and replace all the occurences of HelloWorld with BlogsComponent .

Check http://localhost:8080/ to make sure the project is still rendering fine.

Then update the BlogsComponent so that it looks like this:

Notice how we imported our blogModel from blog.model.js .

Now look at http://localhost:8080 . The list of blogs should be rendering.

Related Concepts

Routing to Individual Blogs in a Vue

Brought to You By

Firefly Semantics Supply Chain and Big Data Analytics for the Cloud