Building A News Application With Dynamic Routing on Vue.js
Hello everyone. Today, I will show you how we can build a simple news application in Vue.js and we will be using dynamic routing to view each individual news. This is really simple and easy to understand.
Creating our vue app
Make sure Vue CLI is installed in your computer. It can be easily installed using npm install -g @vue/cli.
Now let’s create our vue application using the following command.
vue create vue-news-app
Here, we will select second option and manually select features like vue version 2, vue router and babel. After that, it will install the necessary dependencies and node modules for our app. Once it is installed we can run our development server using npm run serve.
Creating our components
Now, if we look at our file structure we can see there is already a component called HelloWorld.vue inside our components folder. We don’t need that so we will delete it and create two new components inside our views folder. Let’s name one Home.vue and the other Detail.vue
Home.vue
Basically inside our Home.vue component we will display the list of news data that we fetch from an api. This is our Home.vue component.
Before I tell you what’s happening here make sure Bootstrap and Axios is installed. You can install them using npm i bootstrap axios.
First of all, if we look at our script tag we are importing bootstrap and axios that we have already installed. Then we have a constant variable named base_url that has a url which we are fetching api data from.
Inside our data method we will return an object which currently is set to an empty array named newsList because our desired data isn’t available yet.
When created() life cycle hook runs we will get access to components data and events but yet our templates and virtual DOM has not been rendered or mounted.
Inside our method object we have created a method named getNewsDetail() which we are running inside our created() life cycle hook. What we are doing here is defining a logic and reusing it whenever we need.
Inside our getNewsDetail() method we are fetching data from the base url that we have set and storing the response we receive inside our response variable. Now since we have our desired data we can simply pass our response data to the empty array named newsList inside our data method. We have access to our data properties using this keyword.
Inside our template tag we are using v-for directive where we have defined a news variable which simply loops through each item inside our newsList. But using the JavaScript slice method we will only display our first 6 items from the newsList. Then we can simply get our news image, title and published date using news.title and so on.
Now to go to the detail page of each respective news, we are passing a unique id of each news inside the :to prop(similar to href) inside </router-link> component(similar to </a> tag) that is configured to work correctly with vue router.
Detail.vue
In about.vue component we basically route to the detail page of the respective news that we have clicked. This is our Detail.vue component.
index.js
This is our index.js file inside our router folder. If we have a look here we can see we have imported Home.vue and Detail.vue and configured their respective path.
Our Home.vue components renders in the path that doesn’t have any name but our Detail.vue component have /:id in it’s path because it expects a dynamic id as colon(:) symbol represents a dynamic segments.
To get the dynamic id we can get the respective news id through this.$route.params.id.
Inside our script files we can see our news id is stored in newsID variable and we are again fetching data from the api url but this time concatenating the newsID in the url.
We can also set the base url in our index.js file so that we don’t have to write the url name in every component we need. Now we can directly write axios.get() in Home.vue component and axios.get(newsID) in Detail.vue component instead of providing the full url.
Axios.defaults.baseURL = "url goes here";Conclusion
In this article we learned how to fetch data from an api and route to its respective path using dynamic routing.
I would like to recommend everyone to go through the official documentation or other useful sites to explore and keep learning.
Thank you for reading!