Vue.js is ideal library for my case, but I use it on non-SPA page.
Is there a way to bypass syntax v-bind:click? I would like the attributes starts from data-v-* and don't contains :.
My solution (based on accepted answer):
It looks like Vue.js will not pass the exam here.
Knockout proved to be the ideal library for friendly SEO html syntax without compilation templates.
You can use script templates to "hide" your Vue-HTML from the validator. The following validates as HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<script id="some-template" type="text/template">
<div v-model="foo" v-bind:click="dontCare">Whatever</div>
</script>
<some-template id="app"></some-template>
</body>
</html>
This is not as much of a cheat as it might seem, since Vue-HTML is not HTML, but is in fact a template used for generating HTML (or, I think more accurately, for generating the DOM). But it is a complete cheat in the sense that the generated HTML is never subjected to the validator. :)
Alternatively, you could look at using Knockout, which uses pure HTML5 (what you write is what is delivered to the browser). It is not as performant as Vue, but it is an MVVM framework.
Short answer is: No.
I don't think there is a way to change the templating of Vue. The generated HTML shipped to user will be valid, because modifiers (v-for, v-bind, etc.) will be stripped of your HTML. Framework like Angular, for example, does not strip the multiple "ng-*" properties. For instance, you could write:
<div v-if="model.length" />
The resulting html will be:
<div />
Which is valid and compatible with any W3C validator.
Related
I'm using quasar and vue3 to build an SSR app
In chrome developer mode when I visualize the generated HTML, I have some Vue components not compiled to raw HTML like:
<body class="desktop body--light" data-server-rendered>
<div v-for="deal in clientssList" :key="client.Id">
<CLientItemSmDown :ClientModel="deal"></CLientItemSmDown>
</div>
is this normal, isn't SSR supposed to return raw HTML so bots can read it?
Saw this question last time already (can't find it back).
But no, CLientItemSmDown is a valid web-component and don't need to be transformed into a built-in HTML tag like input, div etc...
There is maybe an option to convert it down the road to some HTML, but I don't think that it's necessary and it may not be easily done if it's not supported by default.
That page may be quite interesting regarding Vue + Web-components.
You may raise a Github issue or join their Discord.
The TLDR being that it's fine to let it as is IMO.
Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0
I'm very new to Apache Velocity, and I'm having a little trouble figuring out the optimal way to structure my templates. In most of the guides I have seen the pages have been built like this:
#parse("header.vm")
<body>
...
</body>
#parse("footer.vm")
I have also seen someone come close to a "main" template with this approach:
<head>
...
</head>
<body>
#if($activeTab=="home")
#parse("home.vm")
#elseif($activeTab=="aboutus")
#parse("aboutus.vm")
...and so on.
</body>
Which seems a little silly, but I guess it works.
I've used Twirl a lot, so I might be spoiled, but I'd like to inject a template into another, essentially ending up with a main template like this:
<head>
...
</head>
<body>
$content
</body>
And then writing every other template as:
#parse(main){
TEMPLATE CONTENT
}
Is this possible in Velocity? If yes, is it bad practice, and if so why?
Thanks.
Velocity itself doesn't provide good support to layout template (the main template as you called). However they provide a tool called Velocity Layout Servlet (VLS).
To give you a heads up, some other templating solution like Rythm provides very nice template layout management via the template inheritance mechanism (demo). Disclaimer: I am the author of Rythm so I might have some bias here. However you can checkout this article created by a third party to understand the pros and cons of different template solutions.
You can use the $!bodyContent variable.
mainLayout.vm:
#macro(mainLayout)
<head>
...
</head>
<body>
$!bodyContent
</body>
#end
index.vm:
##mainLayout()
<h1>Index page</h1>
#end
I want to know if it is possible to let apache substitue a link in the html I return to the client with the html of the site behind the link.
So instead of
<html>
<head>
</head>
<body>
Link
</body>
</html>
I want something like this:
<html>
<head>
</head>
<body>
// the html of the page behind the link
</body>
</html>
I can´t use javascript or php or anything, let´s assume I only have html.IFrames are as well no solution for my problem.
Just for everyone that comes to a similar situation, Ulrich Schwarz gave a good hint with SSIs, which is in this scenario the only way that could work. However, due to cancelling the project, I was not able to validate the usage of SSI for this scenario.
This can be little painful to do and might not be suitable for all cases but you can maintain a plaintext file for every html page you want to show source of and add a link to that file instead.
For eg: Instead of <a href='somefile.html'>Click</> do <a href='somefile.source'>Click</>
where somefile.source is the copy of the somefile.html. Add triple qoutes """ in the first and the last line of the file. I didn't try a lot of combinations but this works for fairly decent html codes.
I know that this is a very non-standard use case, but I'm chaining HAML, Markdown, and Handlebars (in SproutCore 2.0), and I'm 1 step away from 'beautiful' code. Intermingling HAML, Markdown, and Javascript is less ideal than it could be. If I wanted to add a post-filter to the entire output of HAML, replacing {{text}} with <script>{{text}}</script>, what would be the best way to do it?
I could just hack on a post-build step after haml, but I'd like to turn it into something that I can give back to the SproutCore community.
I want to replace
%body
javascript:
{{handlebars}}
With
%body
{{handlebars}}
Which would give me
<body>
<script>{{handlebars}}</script>
</body>
However, I also want this to work when embedded within markdown. For example,
%body
markdown:
# Hello, {{handlebars}}
Currently, the only way to get this is
%body
markdown:
# Hello, <script>{{handlebars}}</script>
Which would product
<body>
<h1>Hello, <script>{{handlebars}}</script></h1>
</body>
Revisiting the same issue much, much later, it appears that there's not a good solution for this with HAML. However, Jade does just about everything that I want.
http://jade-lang.com/
Input
html
script(type='text/x-handlebars')
:markdown
*Hello, {{handlebars}}!*
Output
<html>
<script type="text/x-handlebars"><p><em>Hello, {{handlebars}}!</em></p>
</script>
</html>