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.
Related
I am completely new to Vue and Tailwind. I was just looking at https://tailwindui.com/components/marketing/elements/headers and saw the Requires JS tag. When I copy-paste the code to my project, it gives a blank page. Where do I configure this part to include the JS?
Nvm, I just had to read the documentation. https://tailwindui.com/documentation#using-vue
I'm using Nuxt to build a component library for use with the various CMSs that my company uses. Basically, I want to use the generated HTML to create reusable widgets for the CMS. The CMSs in question can't use Vue components directly because the client's admin area doesn't play well with Vue (for example, the inline editor in Kentico 12 does not work at all with Vue and our clients require this functionality).
Using Nuxt to build the component library works great as long as the components don't DO anything. However, if I want to create an accordion that has an #click event, it doesn't work when loaded into the CMS. I narrowed down the issue:
A) http://example.com/Accordions/
B) http://example.com/Accordions/index.html
Case A works fine. With Case B, the page loads but none of the scripts work. The events do not fire at all, and I'm getting the following error:
"DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."
The Accordions component doesn't work on any page that is not http://example.com/Accordions/.
Nuxt is generating the Accordions/index.html page so I'm assuming it's connecting the route with the functionality in the JS, but I'm not sure exactly what the problem is, what to search for or how to fix it. I've been searching for hours. Can anyone help me with this?
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've been bashing my head against this for 9 hours now. How do I use a directive inside a component?
I'm trying to implement a click-outside event on my clickable components, following this thread. But my component is in a separate .vue file with template, etc, and I have been googling and throwing copy pasted code at it for hours and I just can't get it to work. It either can't find the imported file, or can't find the click-away function, or all sorts of crazy compile errors or runtime errors.
I'm still somewhat new to Vue, but what's the standard way of using a directive in a component? I thought it would be super simple, but I've got hundreds of tabs open and every single possible google link is purple, and nothing works. How are directives even possible if no ones using them with components?
i got a little Problem, i'm creating a vuejs package in which i use vue-i18n to translate things.
The Problem is, if the user haven't got vue-i18n installed it breaks the package (obviously since i use it).
Do you know a way to prevent this?
My first approach was to just v-if the translations in the template to check if i18n is registered within window, but that obviously won't work if a user names the object differently.
you can check if this.$i18n exists