We have an existing website. We'd like to add Vue to areas of the site. Some areas we'd only need a single Vue app to run like a shopping cart. Other areas we'd have multiple of the same component on the page broken up by non Vue items. We'd also like to use single .vue files for our building. I can't for the life of me figure out the best way to do this.
If we use the CLI to build individual apps, we can of course bring those apps in on the pages and where needed. However on the pages where we have the same component separated by non Vue items, it seems we'd need the exact same app multiple times and compiled this doesn't seem to work.
Whats the best route to do this. I'd like to just add a global wrapper to my site, compile a single APP and then house all logic inside components. This breaks down as it replaces my existing content with the app's content when it's a compiled app. I can on the core layout page just instantiate an app and that works, but then I can't use single file components.
Am I missing something. I'd like to use single file components, have a global wrapper on my site with existing content used and components only where needed, AND not have to import each component file one by one.
We cannot use WC builds either as we can't drop IE 11.
In case of using UI frameworks (like Bootstrap-Vue, ElementUI or Vuetify, etc.) in our Vuejs application, it's possible to import entire UI framework components & stylesheets from node_modeules in the App.vue(or in the application entry point), or importing a particular ui component in particular Vue file/Component as needed.
The demonstration of these two approches looks like:
For scenerio 1
in App.vue
import BootstrapVue from 'bootstrap-vue'
For scenerio 2
in any particular .vue file
import {BContainer} from 'bootstrap-vue'
So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.
On the other hand, it's quite inconvenient to import each ui component in every .vue file.
So what is the best practice for small or large scale web applications?
Does the practice is same for other JS frameworks/Libraries link React or Angular?
Thanks in advance.
Scenario 1 – register all components globally
All components from the library will be available to use everywhere.
If you change or update the library and some of the component names have changed, you won't get any errors at build time.
Scenario 2 – pick-and-choose specific components locally
Gets annoying to have to import each component when you want to use it.
Only components that are actually used (imported) will be included in the bundle (if using webpack or something similar). Results in a smaller bundle size.
It is clearer to look at the template and know where each component comes from. If you have lots of globally-defined components then there is no clear link between a component and where it came from.
If you change or update the library and some of the component names have changed, you will get build errors due to missing modules.
So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.
It does make a difference when you are importing the entire package globally. Also it won't reload the package for every route change as you have the import inside App.vue. It will be done once when your app is loaded for the first time.
I found this article very helpful on how to optimize loading 3rd party components into vue app.
On the other hand, it's quite inconvenient to import each ui component in every .vue file.
End of the day it all comes to how much of tradeoff your development team is willing to make between optimizing the app and adding multiple lines of import code into individual components.
I want to create an application with a plugin structure. I figured out that the best way would be compiling plugins as web components and then use them, but importing them not as global components appeared to be difficult. So, what is the best way to import and use external Vue component? I don't want to make component global, because I would like to unload plugins when the user turns them off.
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
As the title implies, I need solid SEO and thus I need to have all the HTML loaded on my site on initial load. However, because the backend is written in PHP, and because it would be more work to write my Vue components with the server in mind, I don't want to use server-side rendering (SSR).
That leaves me with the option to send HTML over the wire, the "old school" way. What I am thinking of doing is writing each page's HTML like normal, but make one of the root html elements a Vue element in order to "upgrade" it. So the initial load downloads the finalized HTML, with all the data (tables, lists, etc already populated), but then after all the scripts are loaded, javascript can take over to make things easier and give a better UI experience. This poses a few questions, however:
Am I limited to a single component, the root? It'd be nice to still have many sub-components that would each have their own state. Perhaps inline templates can be used somehow?
Vue templates have their own templating system, like the mustache braces for displaying variables {{ myVar }}. Will I not be able to use them? The one way I can think of is to create a Vue template (that can be loaded from an external script) that is identical to the part of the HTML that it "takes over". The downside is that I'd have to maintain that component both in the original HTML and in the vue template.
Are there any good examples of what I'm trying to accomplish here?
Edit: I want to clarify that I'm aware I can put in various components here and there throughout the page. This still poses the question of how to make those components already start out rendered. Better yet would be to turn the whole page into Vue, much like an SPA.
I need solid SEO and thus I need to have all the HTML loaded on my site on initial load.
This is not entirely true. Google (80% of search traffic) easily parses SPAs now, so SSR purely for SEO isn't required anymore.
But to answer your question in general, you should check out Laracast's Vue.js series. They go in-depth on how to use PHP with Vue.js (including templating and variables).
I'd ask what it is you want to achieve with Javascript/Vue.js in your page. If everything is already rendered in PHP, does Vue provide a simple UX enhancement or takes over most of the page's heavy lifting (navigation, etc.)? If you have no reactive data and want Vue to simply be a controller for rendered components, then knock yourself out, although it might be approaching an 'overkill' scenario.
Have you looked into Prerender SPA Plugin ( https://github.com/chrisvfritz/prerender-spa-plugin )?
It is offered in the Vue documentation as a viable alternative to server side rendering ( https://v2.vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering )
Recently I've developed a multi-page application using Vue, here is how i tried to solve the SEO (Maybe this can help you ):
Htmls of header and footer (and other main common components) are packed to the page.html(eg: home.html, search.html).
Script and style are of header and footer imported in page.js(eg: home.js, search.js).
Add div.seo-zone to page.html's div#app, which includes the main SEO data(using some h1,h2,p,div and so on), and add
.seo-zone {
display: none;
}
in your css.
4. Make sure your app's root component's el is '#app'(each page's main content can be a Vue app).
Develop your app as usual.
After Vue rendered, the div.seo-zone will be replaced with your Vue components (although it can not be seen)