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.
Related
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 have a angular 5 component that is using ngbootstrap and bootstrap 4 to display a tabset. The tabset does not style correctly.
I am using ngb elsewhere in the project and it seems to work fine elserwhere.
Here is my component template:
I'm importing ngbmodule into my sub module:
and I have it imported forRoot() in my app module:
I also made sure to add bootstrap.min.css to my angular-cli.json when troubleshooting (and made sure the file was there):
Yet, when I view my component, the ngb-tabset isn't rendering correctly at all:
I have restarted ng serve many times and checked my console for errors (clean), I'm not sure what could be the issue, as our ngb modals and ngb date pickers have been working fine (and still are) :'(
This was my problem:
<ng-template ngbTabContend>
<p> here's some content</p>
</ng-template>
notice Contend instead of Content. D'oh!
i try to do my first steps with vue.js.
My Question is:
Is there a possibility for the use of code completion if i dont wat to use the cli.
Therefore i have no .vue-Files.
I just use vue by binding the script (vue.js) over the < script>-tag to my html code.
I created a new javaScript-File (myVue.js) and also include it per script-tag in my html.
Vue itself is working correctly!
My problem is that the plugins i found so far (for sublime etc.) are not working with the .js-files.
Is there a way to use code completion and (correct) syntaxhighlighting in .js-files?
Thanks for having me.
I have a very annoying problem with my sublime snippet about .vue type flie.
Say I want to add a vue snippet in sublime on my own, and I want the vue tabtrigger below works in vue type file only.
I add these codes into my vue.sublime-snippet:
<snippet>
<content><![CDATA[
Some text
]]></content>
<tabTrigger>vue</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.vue</scope>
</snippet>
After saving this file in my sublime folder, I create a test.vue file and type vue and then press Tab.
But nothing happened. What I expected is Some text could appear after tabbing in test.vue file.
Why doesn't my snippet work on vue file?
PS: I changed source.vue into source.js source.php,etc in my snippet and tested in corresponding js, php file, they all work fine. Only vue didn't work out. Is there anything wrong with sublime identifying vue type file? How to solve this problem?
The correct scope selector to use for Vue.js is text.html.vue, which can be seen by creating a new, empty tab in ST, setting the syntax to Vue.js and then going to the Tools menu -> Developer -> Show Scope Name or by checking the syntax definition: https://github.com/vuejs/vue-syntax-highlight/blob/f87459fc1bf26a4b8e50e232757d4682892c971d/vue.tmLanguage#L1465-L1466
I recently faced the same issue and I used source.js as the scope selector.
<snippet>
<content><![CDATA[
your snippet here
]]></content>
<tabTrigger>vue</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
I am using Vue.js for one of my frontend projects.
As you know, Vue comes with special syntax for components - each component can be declared in a single .vue file. That means, that you can define all related stuff in a single file like this:
<tamplate>
...component template goes here...
</template>
<script>
...component code goes here...
</script>
<style>
...component style goes here...
</style>
Of course vue support in various IDEs isn't perfect yet. Vue is relatively young framework, but I think it will be popular very soon. It looks so straightforward and predictable after Angular that I even decide to use it in all upcoming frontend projects, but it is, of course, another story.
Ok, WebStorm doesn't know anything about .vue files, but vue looks like html, so you can solve that problem easely - just add *.vue pattern to list of patterns for HTML file type (settings -> editor -> file types).
After that tweak everything works fine until you try to use non-css styles - for some reasons WebStorm fails to highlight embedded styles with type text/less and so on. I tried to solve it in a different ways:
<style type="text/css></style>
or
<style rel="stylesheet/less"></style>
...but without any success.
Fortunately vue-loader (that I am using with WebPack in order to build my project) supports another syntax of .vue files, which allows to declare template, code and style in a separate files. It is ok, but I think that single file per component is better (at least it's easier to manage). And now I am forced to declare my styles separately because I can't let WebStorm to highlight embedded LESS styles.
I tried to use WebStorm language injections, but without any success too (or I just miss something in my WebStorm configuration).
So, the final question is: how to enable syntax highlighting for embedded LESS styles in WebStorm 11?
Such support is not possible in WebStorm v11/PhpStorm v10 -- only CSS is available as injectable language.
However the next version (WebStorm v12/PhpStorm v11) already supports it -- just use appropriate rel="stylesheet/less" (in case of LESS) attribute on your <style> tag.
If you want to use another attribute or value to identify what language is meant to be used in your <style> tags or enable this for another (already supported by IDE) CSS-preprocessor (e.g. Sass/SCSS/etc) -- create custom injection rule at Settings/Preferences | Editor | Language Injections.
As of 2017.1 version some other improvements/changes were made -- see WEB-20921 : Add support for valid HTML syntax for including LESS/SCSS in <style> tags
ticket for details.