Vue-router with a Google Inbox-inspired navigation interface

I am currently in the process of developing an app using vue-router with the goal of achieving a user interface similar to that of Google Inbox or possibly the Techcrunch homepage. Specifically, I want to have a list of items where clicking on one item expands it in place to display more details. The URL should also update accordingly when an item is expanded, and collapsing the item back into the list should be possible by clicking "back". Additionally, I would like for the page to display the expanded item when accessed directly via URL, potentially showing more list items below as well.

However, I'm having trouble figuring out how to build this functionality. I've been experimenting with the idea of child routes, but I'm unsure where to position the child <router-view> since its placement will always be dynamic based on which item was just clicked for expansion.

I suspect that utilizing named views could help me achieve this, but I find myself struggling to fully grasp the concept.

If you have any insights or suggestions on how I can implement this feature, please feel free to share your ideas!

javascriptvue.jsvuejs2vue-router

Answer №1

A related issue was discussed on the Vue GitHub page some time ago, focusing on opening modals rather than collapsible containers. A useful blog post linked in that discussion may provide insights for your situation.

Once you have dynamic routing implemented like they did for modals, replacing content with articles and animating their expansion should be straightforward. The Vue documentation cookbook also contains a helpful guide on creating a dynamic blog, which could serve as a useful resource too.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is MongoDB's find() method returning incorrect objects?

My current task involves running a Mongo query on the Order database to retrieve orders associated with a specific user by using their email. This process is achieved through an API, but I'm encountering difficulties as the returned object contains un ...

javascriptreactjsmongodbmongoosenext.js

Issue with Magento site: Clicking on thumbnail photo does not update the large photo on mobile devices

As I navigate through a Magento site, I encounter a problem with the thumbnail images not reloading the larger image when clicked. Instead, the browser jumps to the top of the page and a hash symbol gets added to the URL. Based on this behavior, I suspect ...

javascriptjquerymagentomobileprototypejs

In order to avoid errors, it is necessary to enclose "RawText "; }"" within an explicit <

Just started working with React and encountered this error message: The RawText "; }" needs to be wrapped in a specific tag Everytime I attempt to map my JSON array, this error pops up. I've heard it might be related to space characters, but I ca ...

javascriptreactjsreact-360

Creating a function in AngularJS to select all checkboxes

I recently started working with Angular and I implemented a select all checkbox that checks all the boxes using ng-model/ng-checked. <th> <input type="checkbox" id="selectAll" ng-model="selectAll"/> </th> <th ...

javascriptangularjsfunctioncheckbox

Retrieve language translations using Vue from an external API

Utilizing vue along with I18n for translations has been smooth sailing when hardcoded: import { useI18n } from 'vue-i18n' const { locale, t } = useI18n({ useScope: 'global' }) Extracting values from a json file in the template: <di ...

vue.jsvue-i18nlanguage-translation

Setting state for a dynamic component based on condition in React

Working on creating a dynamic component where the data index matches the URL parameter blogID received from the router. Below are the router parameters sending props to the component: <Route path='/blog/:blogId/:blogTitle' render={() => & ...

javascriptreactjsreact-router

Leveraging AngularJS html5mode in conjunction with express.js

Client-side: when("/page/:id", { templateUrl: "partials/note-tpl.html", controller : "AppPageController" }); $locationProvider.html5Mode( true ); Html: <a ng-href="/page/{{Page._id}}">{{Page.name}}</a> Server-side: app.use("/pag ...

javascriptnode.jsangularjsexpress

Refreshing a DIV in Rails by reloading from model using a JavaScript function

Recently, I created a page displaying the number of Widgets a customer has. Below is the view written in Haml: #available = "Available widgets: #{@customer.widgets.unused.count()}" (The "unused" scope in the model displays available widgets). When a C ...

javascriptruby-on-railsruby-on-rails-3unobtrusive-javascript

Passing and Retrieving Specific Item from Mapped Array in React/Mobx: A guide on sending a single item from a mapped array to another component and accessing only

My API data is stored in a store called PositionStore, which includes information such as loading status, error messages, and an array of items. Here's how it looks: const PositionStore = observable({ loading: false, error: "", items: [] as ...

javascriptreactjstypescriptreact-routermobx

Leveraging the power of the 'var' keyword in JavaScript when

I have a javascript code snippet that looks like this: var grade_type = document.getElementById("grade_type").value; gradesRef.set({ grade_type: firebase.firestore.FieldValue.arrayUnion(grade) }); However, when the data is stored i ...

javascripthtmlfirebasegoogle-cloud-firestore

What is the standard approach for exchanging localized user interface strings between Microsoft's MVC and JavaScript?

In the process of developing an application that utilizes a dynamic, javascript-based client, I am facing the need for localization. This particular application includes significant UI components that are not generated by Javascript and are instead served ...

c#javascriptasp.net-mvcasp.net-mvc-4

Develop a fresh button using either JavaScript or PHP

I have designed a mini cart (drop down) on my WordPress site with different styles for when there are products and when empty. To enhance the design, I have utilized CSS pseudo elements before and after to add content dynamically. Is it possible to includ ...

javascriptphpjquerycss

Arrangement of watch attachment and $timeout binding

I recently encountered a component code that sets the HTML content using $scope.htmlContent = $sce.trustAsHtml(content). Subsequently, it calls a function within a $timeout to search for an element inside that content using $element.find('.stuff' ...

javascriptangularjs

Displaying a horizontal scroll bar for legends in ECharts can be achieved by limiting the legend to three lines. If the legend items exceed this limit, they will scroll horizontally to accommodate all items

I am currently utilizing ECharts to display trend data in a line chart format. With 50 different series to showcase, each series comes with its own legend. My objective is to arrange the legends at the top of the chart, while limiting them to a maximum of ...

javascriptangulartypescriptlinechartecharts

"Issues Arising from Compatibility between Internet Explorer, jQuery,

I need help creating a function that will transfer items from the basket to the cart. The code I have written works well in Firefox and Chrome, however, it is not recognizing the products. var modals_pool = {}; $('.deal_order_btn').on('clic ...

javascriptjqueryjquery-eventsshopping-cart

React does not support custom hooks as a function

Every time I attempt to invoke a function from my custom hook, an error message pops up on the screen upon loading stating that setAuth is not recognized as a function. useAuth.js import { useContext } from "react"; import AuthContext from " ...

javascriptreactjs

Personalize headers in v-data-table while preserving default sorting capabilities

I'm looking to enhance my v-data-table by making the table headers "tab-able". To achieve this, I decided to create a slot and include tabindex on the columns. However, I encountered an issue where the sorting functionality stopped working. Does an ...

javascriptvue.jsvuetify.jsv-data-table

What is the best way to utilize the "Enter" key on the keyboard to set state in my component?

I'm a novice when it comes to ReactJs Es6, I am attempting to update the state of my component when the "Enter" Button is pressed. Despite trying various solutions, such as the one mentioned in this answer, I still have not been able to achieve the de ...

javascriptreactjsecmascript-6

Incorporate a variable into a function by integrating it

I'm struggling to accurately calculate the total hours needed based on the method of transportation. This code represents my initial attempt at learning how to code, diving into JavaScript for the first time. Here's my script: $(document).read ...

javascriptjquery

Add a slot to each element within Vue.js

I added a component called vue-select, which is a third-party package that I installed. My goal is to include a slot template in each instance of this component. I envision accomplishing something along the lines of: <v-select> <span slot="no-o ...

vue.js