I've been banging my head against the wall all day on this.
Basically, I inherited a pretty large Vue 2 project with webpack-only implementation (no CLI) and with hundreds of SFC components. Almost every SFC component uses a template with the first element indented -- like this:
<template lang="pug">
span
b Some Stuff
</template>
This has been compiling just fine for months. It seems like Vue 3 and its associated versions of the vue-loader and compiler don't like this... it must be like this:
<template lang="pug">
span
b Some Stuff
</template>
As you can imagine, I am getting hundreds of "unexpected character 'indent'" errors during the build. I run into this whether I use the CLI or whether I use the webpack implementation with all associated upgrades having been done manually...
As much as I love the idea of manually paging through each of the hundreds of .vue files and tabbing back the content, there has got to be a better way around this... right? There appears to be an npm package called vue-indent-pug-loader but after replacing the pug-plain-loader in the webpack file, this doesn't seem to have any effect on the problem.
Is there some utility you know of that can roll through and "fix" my template blocks, or something I can place in front of the compiler to let it process the templates as-is, or am I stuck either manually fixing these or staying on Vue 2?
Thanks!
Related
How can I make a component delete itself in Vue 3?
In Vue 2 you could say this.$destroy(); But apparently that got removed and there is no replacement for it: "vm.$delete removed (no longer needed)" (from https://v3-migration.vuejs.org/breaking-changes/migration-build.html#fully-compatible )
Not sure why it's no longer needed since they don't explain why or give an alternative and I can definitely still see the need for something like this.
For now I just use a <div v-if="show"> but it seems a bit of a hack.
From Vue 3 docs you can find it here: https://v3-migration.vuejs.org/breaking-changes/introduction.html#removed-apis that you don't need to manually manage the component lifecycle anymore. So I guess you can deprecate the piece of code executing ".$destroy()".
I have two SPA on vue, on same deployment area:
Uses Vuetify (www.someserver.com/portal_1/)
Uses Bootstrap-vue (www.someserver.com/portal_2/)
Now I need to make some portal area with components from both SPA. Is there any methodology to deal with it?
I try to create app with vuetify and bootsrtap-vue, but stuck with many sass errors...
I have struggled with the same issue regarding Vuetify styles. I needed to have a second Vue app embedded inside my Vuetify app but the Vuetify styles kept leaking inside the child Vue app, and the global styling coming from child app also broke Vuetify defaults.
I have done a long research and concluded that the options are:
-Rewrite the child app using BEM approach (Still Vuetify would leak with selectors like p, head, body etc.)
-Disable Vuetify's CSS reset file, remove globals and disable theming via hacky approaches.
-Use an iFrame container or web components approach on the second app to isolate it from the other.
Messing with Vuetify library didn't sound too great, because it will be too chaotic to deal with problems later on. We decided to completely isolate two Vue instances via an iFrame in the end, and I'd recommend the same thing if you REALLY need to use both bootstrap-vue and Vuetify, because they both have global CSS selector modifiers and stuff that will just create a huge mess.
I had my team do further research on iframes and how to consistently pass data between an iframe and parent app, here are the two options that you may consider:
vuex-iframe-sync (a lightweight option but I couldn't get it to work properly)
https://github.com/L-Chris/vuex-iframe-sync
Zoid (a library maintained by payPal, very solid approach but tricky to set up with Vue)
https://github.com/krakenjs/zoid
Further info on how to set up zoid with Vue:
https://github.com/krakenjs/zoid/issues/296
PostRobot (Haven't tried this one but also a solid option, probably much easier than zoid)
https://github.com/krakenjs/post-robot
Good luck, and please let me know if you find any other approach that works!
I have a very, very simple set of Vue components that all work. These are a simple addition on top of an existing C# app.
At the moment, these are .html files (brought into the app inside <script> tags) and .js files loaded by reference.
These all work, are very light weight, and I love it.
Now I want to compile the HTML for each component into a Vue render function, and the .js into one minified .js file.
The .js to .min.js is pretty standard, but I cannot figure out how to get the HTML to compile into the Vue render function. Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform, and I don't need a full web application spun up. I only need my existing, simple templates transformed to something more friendly for production than my long-form html templates getting dumped to the page.
I'm not entirely opposed to turning the .html+.js into .vue files, but just doing that doesn't seem to overcome my issue.
I cannot figure out how to get the HTML to compile into the Vue render function
To generate a render function from a Vue template string (e.g., read from an HTML file), you could use vue-template-compiler like this:
const compiler = require('vue-template-compiler')
const output = compiler.compile('<div>{{msg}}</div>')
console.log(output) // => { render: "with(this){return _c('div',[_v(_s(msg))])}" }
Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform
The "web server" you mention is provided by Webpack CLI, and is intended to faciliate development. You don't need to use the dev server. The article indeed describes several steps in manually setting up a project to build Vue single-file-components, but a simpler method is to use Vue CLI to automatically scaffold such a project.
I'm working on a Vue project that is generated with the Vue cli 3. I would like to use different vendors in the same code base.
I need something that can load different images/styling based on a variable. For example something like:
<!-- In HTML templates -->
<img :src="`#/assets/vendor_name_here/banner.jpg`" />
/* In SCSS */
#import "assets/vendor_name_here/style/bootstrap";
Where vendor_name_here is a variable that can be set in the environment. Please, note that the above doesn't work.
Coming from an Angular background, something similar could be achieved by simply adding an app or project to the config. However, there is no such thing documented in the Vue docs (of what I could find).
So is there something similar in Vue?
Update:
I just found out that the following works for HTML images:
<img :src="require(`#/assets/${VUE_APP_VENDOR}/banner-large.jpg`)" />
So the question is still open for the SCSS files.
Update 2:
So apparently the same method also works for SCSS files. I added the folowing in my script block:
require(`./assets/${process.env.VUE_APP_VENDOR}/style/bootstrap.scss`);
And now it works :).
So I found my own answer to this. The fixes are in the answer itself in the updates.
I'm using both Vue.js and HAML in my current project. The templates are parsed by HAML, converted into HTML, then parsed by Vue. For instance:
#pagecontent.nonscrolling
%h2 Demand forecasts
%label{ for:"location-type" } Select location type
%select.form-control#location-type{ v-model:"locationType" }
%option{ v-bind:value:"'foo'" } Foo
It works ok, but it's a bit disconcerting worrying whether all the Vue syntax will make it unscathed through the HAML parser.
But I really like this type of succinct, angle-bracket-less template.
Is there is a cleaner way to achieve this? Some add-on to Vue that supports something similar?
Don't worry to much. There is nothing wrong about using preprocessors. I mean vue depends on wepback where everything is being preprocessed in one way or an other. Out of the box you can use pug with vue so I put more trust in it. It works fine for me without any unexpected problems. Both have the nesting through indentation in common and this is something that starts to be confusing with longer source codes. So I use pug mainly in short components and nest them using named slots into bigger ones.
Your code - pug version (as far I can guess what this HAML code should do)
<template lang="pug">
#pagecontent.nonscrolling
h2 Demand forecasts
label(for="location-type") Select location type
select.form-control#location-type(v-model="locationType")
option(v-bind:value="foo") Foo
</template>
The whole Vuetifyjs website is made with pug:
Vuetifyjs.com Source Code