I'm building a Nuxt app with a layout that consists of 3/4 main content and 1/4 sidebar navigation that uses tabs that expand based on the current route.
My aim is to essentially have two router-views — one on the main page and one in each tab.
With the Vue Router I guess this would be possible to achieve via named views e.g.
<router-view name="rightSidebar"></router-view>
But obviously with Nuxt the idea is that the routing is taken care of behind the scenes...so it isn't possible to configure.
But none the less is it possible to use <NuxtPage /> in this way?
Nuxt.js does not support the router-view. However, you can use the NuxtPage inbuilt component. Just remember that it only works after the pages you are trying to nest have been added in the pages directory.
Here is a link to an overview of it from the Nuxt docs.
<router-link> in my opinion takes more work to implement, since you can add $router.push to any element with an #click event.
What are the pros and cons of each approach? Is there any instance, where <router-link> can not be replaced by $router.push?
While router-link's handler does the same $router.push(), it also performs under the hood a handful of useful actions that you will have to implement by yourself to assure the navigation works as expected in every scenario. For example, it activates a "navigation guard" to check for the validity of the triggering event, catches any navigation errors, also, it is the implementation of active route detection and styling which may be a pain to implement in complex navigations (for ex. multilevel navigation menus) that is also simplified by the router-link implementation.
These are some of the pros that I could spot at a first glance at its source code. You can look at it for a more in depth comparison here
First of all is a tag like a tag in HTML so you can not use it inside your script tags. You can only use it inside tags. You have to give to attribute to router-link and you do not need to use click etc.
However, for bigger projects sometimes you need to redirect to another page after you submit a form, or anywhere you like to use redirection in your js. That's why there is $router.push, the $router object is vue-router object so you have all functions that vue-router serves you.
I'm new to Nuxt and Vue in general, so I'm not sure, what would be the best solution for this use case.
I want to change the text (like "Home", "Settings", "Favourites" etc.) inside my Header.vue (always fixed on top of the page) from another component. like Favourites.vue for example.
Sometimes I want to hide the header completely or hide the title and display buttons instead,
so I need to pass more props than just the title.
I tried using different layouts, but that breaks the animation transitions (I haven't found the solution for this yet), but I think it's still better to have control from the page in what I'm passing into this component.
Should I pass props from Page.vue to parent and read it from there in Header.vue component?
Should I use Vuex to pass this through the store and update it when the route changes? Or is that too complex for this use case?
Maybe there's a simpler solution that I'm not aware of.
Folder structure:
/components
├──Header.vue
└──Nav.vue
/pages
├──Index.vue
├──Profile.vue
├──Settings.vue
└──Favourites.vue
Vuex is the answer here— don’t worry about the 'simple' use case. As soon as you notice you’re creating data that other components may rely on (is the header visible on this page? Is the text different? etc) it’s a good idea to move into Vuex and maintain a single source of truth.
Your app may seem simple to begin with, but it’ll inevitably grow and at that point you’ll appreciate having a single source of truth vs. trying to pass things between components via props.
Nuxt also makes implementing Vuex very straight forward. No doubt you’re capable of pulling up the docs!
The Goal: Have two separate, independently navigateable routes with vue-router.
Details:
How can I have two parts of a page that are independently routed with vue router? Say you have a page split into a main view and a sidebar. The main view is what you would normally expect from a view, you click on links and it changes the path and loads a new component. The sidebar is completely separate, no matter where you are in the main view the sidebar does not change, but the sidebar also has links that let you go to different components within itself.
With vue-router, I can have named views, but these seem to be tied to whatever the current path/route is, and cannot be controlled separately.
Example Annotation:
Question
Can vue-router have two separate, and independent routes/views that are not tied to each other? If so, is there documentation on this, are there router code examples?
Note: There is no code here, it doesn't seem necessary as this isn't a code issue, it's a vue-router use-case issue.
You can achieve separate independent routes if you use 2 Vue apps each with its own router.
A small demo in this fiddle.
I've used 2 routes, one with history mode and one abstract.
The biggest problem I see with this is that, at least out of the box, you cannot have a URL that points the user to the same view(s), as now you are managing 2 different routers.
The other is related to communication, you now have 2 different Vue app instances so you need to do something about communication between them.
But this shouldn't be that hard
if you are using Vuex you can set the same store object on both of them
If you are just using a plain data object you can pass the same object to both instances and that will become reactive or
you can always communicate over the same bus
I just used the command line (CLI) to initialize a Vue.js project. The CLI created a src/components and src/views folder.
It has been a few months since I have worked with a Vue project and the folder structure seems new to me.
What is the difference between the views and components folders in a Vue project generated with vue-cli?
First of all, both folders, src/components and src/views, contain Vue components.
The key difference is that some Vue components act as Views for routing.
When dealing with routing in Vue, usually with Vue Router, routes are defined in order to switch the current view used in the <router-view> component. These routes are typically located at src/router/routes.js, where we can see something like this:
import Home from '#/views/Home.vue'
import About from '#/views/About.vue'
export default [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
component: About,
},
]
The components located under src/components are less likely to be used in a route whereas components located under src/views will be used by at least one route.
Vue CLI aims to be the standard tooling baseline for the Vue
ecosystem. It ensures the various build tools work smoothly together
with sensible defaults so you can focus on writing your app instead of
spending days wrangling with configurations. At the same time, it
still offers the flexibility to tweak the config of each tool without
the need for ejecting.
Vue CLI aims for rapid Vue.js development, it keeps things simple and offers flexibility. Its goal is to enable teams of varying skill levels to set up a new project and get started.
At the end of the day, it is a matter of convenience and application structure.
Some people like to have their Views folder under src/router like
this enterprise boilerplate.
Some people call it Pages instead of Views.
Some people have all their components under the same folder.
Choose the application structure that best suits the project you are working on.
I think its more of a convention. Something that is reusable can be kept in src/components folder something that is tied to router can be kept in src/views
Generally re-usable views are suggested to be placed in src/components directory. Examples like Header, Footer, Ads, Grids or any custom controls likes styled text boxes or buttons. One or more components can be accessed inside a view.
A View can have component(s) and a view is actually intended to be accessed by navigation url. They are generally placed in src/views.
Remember that you are not constrained to access the Components via url. You are free to add any component to the router.js and access it too. But if you are intended to do it so, you can move it to a src/views rather than placing it in src/components.
Components are user-controls in analogy to asp.net web forms.
Its just about structuring your code for better maintenance and readability.
Both folders are basically the same since they both hold components, but the aesthetic of Vue is that components that will function as pages (routed to like page for navigation) are kept in the /views folder, while reusable components like form fields are kept in the /components folder.
src/views is typically used for your main pages in the application that you navigate via router.
src/components is used for the reusable components that you use inside your main pages (multiple times inside the same page or across different pages)
Simple, Views are for routes while Components are components of the route.
You can consider Views like page and components are reusable block of code that you can use in any page or components (both are Vue files these terms are just for demonstration)
Less dynamic close to static pages is reffered to views and more reuseable and dynamic content is placed under the components.
It is quite simple, as mentioned by others: you usually use Views for the actual pages you want the user to navigate. Components are the elements inside those pages that you can reuse in any page of your project.
In my view, component folder must contain the components that are going to be used in the views. And in views, there must be those pages that are to be accessed by the router. For example, you have a navbar, header and a footer in your pages to be used and you have a login page, signup page and a main page. Then your src/components must contain header, footer and navbar. And in your src/views there must be files like login, signup and main file.
Both these folders hold Vue components, 'views' folder is supposed to contain root level components where other components would be imported. The so called 'other components' reside inside the 'components' folder. Let's take an example for illustration.
Suppose you have 3 root level pages for a website yourname.com
yourname.com
yourname.com/about
yourname.com/price
Your 'views' folder would have 3 components. 'about.vue', 'index.vue' and 'price.vue'. These files would be imported in your router file or could be directly imported in app.vue file for routing. These views could have multiple components inside them like 'price-card.vue', 'contact-card.vue' and more. These files would typically reside inside a folder named 'components'. You can import these components inside the vue files you have in the 'views' folder and then render them.
Nothing but to arrange the project in logical order. You can still create components in the view folder, but it's a better approach to separate items so that the code is less messy.
The difference is the function they perform. The views are used to represent your pages properly, that you can navigate back and forth, and the components are the parts that compose your page