I have a Vue 3 project,
Most of my Components use the Template in App.vue (My understanding goes that this is Similar to a "Master Page in .net core with the completeness inheriting the style and layout from the App.vue. In my case, the app.vue will have the dashboard layout (top and sides) and then I will load the restricted components in the content section.
However, I cannot seem to figure out how to make public-facing pages, such as login and register not reference the Dashboard template at all as they are not logged in, but still allow some Vue functionality. Post for login, errors returned, etc. How can I split them or have multiple Master App.vue templates for different users, based on their role or logged-in status.
your help is greatly appricated.
In App.vue you can use vue js built in component tag to render dynamic layouts
<component :is="activeLayout"></component>
you can bind it to a computed property and return the appropriate component to bind for different scenarios
Using vue-router 3.0.6
I have several landing pages, whose URLs are loaded on page load via an API.
I wait to render <router-view /> until this API call has resolved.
When it has resolved I run this.$router.addRoutes(routes)
However once router-view is render, I get a 404 route rendered.
If I navigate to the homepage and click a link to the dynamic landing page I was originally trying to access on load it works fine.
Is there some function to get vue-router to re-evaluate it's available routes, something that might be happening during the route change to the homepage that allows the next navigation to the dynamic page work?
First load -> /dynamic-route = 404
First load -> /dynamic-route -> 404 -> homepage -> /dynamic-route = OK
Old question but if anyone is stuck on this, you need to perform the operation that sets the routes before calling Vue.use(router) in Vue 2 or app.use(router) in Vue 3.
This is because installing the router plugin immediately triggers an operation to match the initial path. Since the route you wish it to detect is not registered at that time, it gets missed.
It does not matter if you show/hide the router-view component based on a flag variable since the path matching operation has already been completed by then.
when you match /dynamic-route directely, maybe the addRoutes did not work. so it would math 404.
you can make the function of addRoutes work using the function of beforeEach when you change your route.
I have an application in vue with typescript. I saw when I use import to load component then I got component-bundle with all the code of component inside.
I wonder if should I do this for every component I want to load, for example: I have app.vue inside I have toolbar.vue and drawer.vue. in my router components I have others vue components.
What I'm afraid that gonna happened is app.js is loaded then components inside the route definition(500k), then I get the toolbar component (1.5mb). and I'll get flashing screen weird.
So, should I use splitting bundle for every component in my app?
You can do code splitting if you are not expecting that particular component to be re-used for every page.
Take for example the Header and Footer component. Since they will be used in almost all of the pages, there is no reason to code split as you want it to be loaded along with the bundle for all pages.
Take for example you have a component where it has a Blog Widget. This component will only load in the /blog page. Therefore, this is a good use case to be using code splitting as you do not need the Blog Widget to be bundled in other pages except in the /blog page.
I can only provide you with a generic answer and using the Header and Footer components are the best way to express different use cases. As for the rest of the components, you have to decide for yourself if it is worth to code split or not.
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
Is it possible to add an Aurelia top level component without the router?
The goal is to create a component without the router since my application doesn't need any url based navigation.
From what I can tell Aurelia seems to take you down a path where components are instantiated via routing based on how the component is registered with the router.
Instead I would like to just add markup for the top level component on the main index.html page:
<my-component bind.current="'123456'"></my-component>
I would like define components without a router and only use the templating and data binding capabilities of Aurelia.
Is that possible?
Tried this in index.html (inside the body tag of the default project)
<require from='./dist/my-component'></require>
<my-component></my-component>
But it does not seem to pick it up. Ideally I would like to just define it in markup on a page served from the server since it would enable me to sett attributes dynamically on the elements
<my-component current.bind={{someServerGeneratedId}}></my-component>
In the above I would use a templating framework like mustache to dynamically render the Aurelia when the page is served from the server.
I could wrap the component in another "landing" component, but that makes it hard to benefit from setting things up with server generated bindings.
UPDATE:
Per Rob's response: https://github.com/aurelia/framework/issues/175#issuecomment-126965417
- He is expecting to add the ability to add a root component to the landing page in a future release. I understand there are ways to not use the router, but it still depends on pulling in a partial view during bootstrapping of the application. This does not use the router directly, but conceptually this is really just an implied/convention based client side nav. In the end there is a client side request to pull in the view, which means I can't generate the html dynamically from the initial server response.
Yes you can do this very easily without the router. Just remove the router configuration from your app.js and in app.html remove the router code there as well.
I think the issue you are running in to is that you are specifying the dist folder again in your index.html. You should just reference it like this -
<require from="my-component"></require>
<my-component current.bind="someServerGeneratedId"></my-component>
This will bind up correctly.
I guess you're missunderstanding the route concept here.
At the time of writing, Aurelia's index.html page is your initial page where you put your "loading" stuff and where Aurelia bootstraps the entire app.
So, you can't put a custom component directly on it, but that should not be a problem.
If you don't change any configuration on Aurelia, it will look for your app.html to bootstrap your app, and there you can have anything you want (routes or not, doesn't matter). So, you should put your component there, beside the other tags/components/etc you need.
I've made a plunker without any routing and with a custom component in the app.html, and something simulating what you need.
<template>
<require from='./my-component'></require>
<my-component current.bind="serverGeneratedID"></my-component>
</template>
http://plnkr.co/edit/mLb8Ym638b4V2e9LDp0A?p=preview
If you need anything else, comment here and I'll try to go further.