I am currently building a WP site with the Optimizer theme. It's an academy website, using the Sensei plugin. I am having an issue with the wrappers, and although they wrote this article on how to fix it, I can't figure it out.
Hopefully I'm saying this right.
Wordpress hooks are triggers that allows you to manipulate a theme or plugin. You can remove, add or replace code on certain Worpress events/calls, without changing the original code.
There are two kind of hooks. Action hooks to manipulate the Worpdress code. Filter hooks to manipulate the output of Wordpress (text, data, links etc.)
You can use hooks by creating Your own functions in the functions.php file of your theme.
The Sensei article:
Your theme creates a wrapper with html divs around the content. The opening divs are after "getheader();" The closing divs are before "getsidebar();", if there is no sidebar then before "getfooter();"
Sensei puts a wrapper around his content as well. This can mess up your theme wrapper.
To fix this: Sensei has actions hooks to replace the wrapper of Sensei by your own theme wrapper.
Related
Some of Vuetify's display helpers (https://vuetifyjs.com/en/styles/display/#display) collide with Tailwind classes.
In Bootstrap, fore example, there's a way to disable (=not include) utility classes in a custom build.
Searched in the docs and in vuetify-loader's docs for a way to do it, couldn't find one - is it possible?
I found this article that helped me remove some of the Display helpers (utility classes) from Vuetify. Over here you can see all the available utilities you can disable.
While I'm not aware of any way to disable Vuetify's Display Helpers, it is possible to prevent collision by prefixing Tailwind's classes. You can read about it in this thread on Tailwind's GitHub.
Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.
It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?
But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS
So I am developing a site as a SPA with Vue JS and I have just came across a issue.
I went to insert Adsense's code snippet like i would normally, but Vue complains with the following
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
So I am now a bit stuck, I have seen a library that will put Adsense in as a component but its a very new/small library and i could not get the thing to work.
I also have a lot of other tracking pixels that will need to go on the site in a similar fashion so I will need to find a way around doing this.
Can anyone lend some advise, thanks.
Try modifying the index.html file instead of the *.vue files. The Vue SPA app automatically listens for updates to *.vue files. So pasting the snippet in html file will bypass the compiler checks for undefined variables, etc.
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)