I had install my project vuetify with this reference : https://vuetifyjs.com/en/
My project has been 100% complete. Now I want to implement SSR for Search Engine Optimization (SEO)
I search on google and I find there exist 3 option to implement SSR to vuetify project
https://ssr.vuejs.org/
https://github.com/vuetifyjs/webpack-ssr
https://nuxtjs.org/
If I using option 2 or option 3, it seems I must to change my template. Maybe I should rewrite my code on the template. Because my template using vuetify template. I don't know if I choose option 1. Whether it also has to change my template or not. I must to try it first
What I want to ask is if in my position I have completed the 100% vuetify project, which is the best choice I should choose for SSR implementation?
Do I have to rewrite my code or is there another way to implement it?
Related
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.
I'm using Nuxt to build a component library for use with the various CMSs that my company uses. Basically, I want to use the generated HTML to create reusable widgets for the CMS. The CMSs in question can't use Vue components directly because the client's admin area doesn't play well with Vue (for example, the inline editor in Kentico 12 does not work at all with Vue and our clients require this functionality).
Using Nuxt to build the component library works great as long as the components don't DO anything. However, if I want to create an accordion that has an #click event, it doesn't work when loaded into the CMS. I narrowed down the issue:
A) http://example.com/Accordions/
B) http://example.com/Accordions/index.html
Case A works fine. With Case B, the page loads but none of the scripts work. The events do not fire at all, and I'm getting the following error:
"DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."
The Accordions component doesn't work on any page that is not http://example.com/Accordions/.
Nuxt is generating the Accordions/index.html page so I'm assuming it's connecting the route with the functionality in the JS, but I'm not sure exactly what the problem is, what to search for or how to fix it. I've been searching for hours. Can anyone help me with this?
Not really a code problem more a discussion/brainstroming-post.
I would like to build some light CMS in Vue/Nuxt, which will output a static website in the end.
So I thought about going for one Nuxt-page (does not have to be a Nuxt-page necessarily) containing all the CMS-related stuff and handle the actual website inside a nuxt-child component to keep code tidy.
Problem is, that i can not access the inner Nuxt page, so any editing will be impossible (I want to achieve some simple inline-editing).
For visualization the editor of webflow may be helpful (Directlink to the video). What i want to achieve is a similar version. I would like to have the page separated from the CMS. The CMS would be the lower bottom-bar and provide stuff like the editor for the inline-editing.
Currently my best solution was to define the editing directly inside the page, which is working, but needs to be stripped out for production and makes a future separation impossible.
Is there any solution for this? Or am I thinking the wrong way?
Can I link both instances with a common vuex-store?
You could created two seperate components, one for editing and one for rendering.
These could utilize components themselves to keep the overhead to a minimun.
You could also use the same component, but lazy load the editor features based on some condition like:
If youre fine with having the Editor only available during development you can create an env variable and check for process.env.NODE_ENV !== 'production'
Another way would be to have some sort of authorization that combined with v-if would show the editor or hide it.
I want to use Polaris css components for my shopify app. I have go through their document https://polaris.shopify.com/components/get-started#navigation. As mentioned there I have include their css and html code for a component but some components are not working functionally like Date picker I have put html code on my page but I am not able to change month, select date etc.
I think I have to load js for get that working but I didn't found any js link in their document.
Can you please help me out?
If you are using the CSS-only version, we do not provide any JS. The CSS version is meant for someone who does not want to use React and is willing to write the scripts required for any interactive components. If you are using the React components, you will not find everything; as you've identified, this is not exactly like Bootstrap or similar frameworks. This is a more selective set of components that encompass patterns that have been established for Shopify's own applications. We will probably add more components in the future, though; if there's something you feel is obviously missing, please feel free to leave an issue.
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)