I would like to know if there's any shorthand to fill the empty vue file with all three tags: template, script and style with proper default content.
As a comparison, at least, VS Code allows to autofill an html file with all default required tags/codes on ! + Enter. I want to know if there's something alike in VS Code or Vetur extension.
I've personally never used it but this seems to do what you're looking for. There seems to be a lot of different configuration options as well.
Related
I'm in a situation where I legally have to add a copyright notice to the top of my files and while I know how I can comment inside either template, script or style, I couldn't find documentation regarding how to do it outside these.
Based on the structure of the file, I assume the standard HTML comment (<!-- Hi there! -->) should work, and it both: a.) seems to work and b.) my syntax highlighter accepts it.
However, I'd like to be sure about it and understand how and why it works this way, I was surprised it is seemingly not covered in the Vue docs.
Yep, you are right. There is a confirmation here: https://vue-loader.vuejs.org/spec.html#src-imports
For the most part overriding an existing Spartacus works fine.
The Minimum amount of effort is
B2cStorefrontModule.withConfig({
cmsComponents: {
DefaultComponent: {
component: CustomComponent
}
},
Mostly I do this because I need to apply some changes to the components html.
So I copy and paste it to my generated customComponent.
But most of the times this html contains directives and pipes that require adding additional Modules to my app.modules.
Sometimes this works fine, but in many other cases the html just wont render.
Example: SearchBoxComponent
when trying to use the html I get a browser Error:
Error: Template parse errors:
The pipe 'cxHighlight' could not be found ("
<a
*ngFor="let suggestion of result.suggestions"
[innerHTML]="[ERROR ->]suggestion | cxHighlight: searchInput.value"
[routerLink]="
{
"): ng:///AppModule/EmvSearchBoxComponent.html#49:21
In other cases I was able to fix this by including the corresponding module that references this pipe "cxHighlight". In this case "SearchBoxModule". But still no good.
How do make this pipe available in my project?
Or maybe there is an even better way around all this importing pain?
You are correct in the way you are overriding components in Spartacus. Like you noticed certain components contain pipes so you will have to manually import those in your components module. This is just the Angular way.
Most of our pipes are reused in multiple components so we try to make them have their own modules to make imports easier.
You are correct about cxHighlight, there is a bug. The pipe is declared in the SearchBoxModule but not exported so it's pretty much impossible to import. I will open an issue to have it fixed.
I'm developing a Vue app using UI Kit which implies using various custom attributes like uk-grid, uk-icon, uk-navbar etc (in Vue single file components' templates). For each one, IntelliJ gives me a warning like
Warning:(7, 52) Attribute uk-icon is not allowed here
How can I tell IntelliJ not to do this? Googling the warning haven't brought any sane results which makes me think there's no ready-to-use package for this (for this particular UI Kit), so the question is: how to make Idea not to warn about a custom list of attributes? But I'll be glad to be wrong and if there is a better solution, please let me know.
Update: like lena has suggested, pressing alt+enter suggests helpful options, including adding attribute to the list of custom attributes. However, wildcard suggestion didn't work for me: the below screenshot illustrates settings that make v-localize attrbute be recognized, but uk--prefixed attribute are still highlighted with warning:
You can add uk-* attributes to Custom HTML tag attributes list in HTML | Unknown HTML tag attribute inspection; the easiest way to do this is using Add to custom HTML attributes quickfix available on Alt+Enter:
Note that IDEA recognizes Vuikit components and directives out of the box - did you consider using it instead of pure UIKit?
I am new to vue2, I am trying to learn and implement it inside our EPUB format. But the problem is that EPUB parser does to allow custom tags / custom components.
e.g. I cant use <li v-for="friend in friends"> in my HTML file as the parser will give error for v-for.
So I want to know if there is any way so that I can write whole vue2 code + tempalte inside .js and later append it to DOM?
Sure, with ES6's ` you can write templates including line breaks in a single string, and then assign the string to the template option.
However, you can use babel to transpile your code before the EPUB parser runs (so there won't be any v-for), check out the guide. And sure setting up the took chain require some effort, you can use the pure js option if your app is not too complicated.
I am using custom seperators/tags for template variables in HTML code. My tags are "{[{" "}]}". Can I make IntelliJ IDEA (or WebStorm) ignore completely what is inbetween them? If it matters, it is Go template language with custom tags.
Example :
<div title="{[{.T.T "error"}]}!"></div>
Gets marked as error because of the quotes inside the quotes. It also disables the ability for proper auto indentation or code formatting.
Another example, in this case JavaScript in an HTML document :
<script>
{[{if .Data.User}]}
var userData = {[{.Data.User}]};
{[{end}]}
</script>
This marks the quotes themselves as error.
I don't want IntelliJ to check the template code, just ignoring everything between the brackets would be enough.
No, you can't. IntelliJ IDEA builds a complete parse tree for the entire file, and it is not able to ignore arbitrary chunks of the file.
What you can do is either write a plugin that will be able to parse your template syntax, or change the syntax you use so that it matches more closely an existing template library already supported by IntelliJ IDEA.