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!
Related
Long story short, I'm having some serious trouble getting themes to work in general - even for the "HelloWorld" base app that comes preinstalled with Vuetify. For some reason Vue/Vuetify do not apply any colors to anything unless I use the "color=" tag and even when I use "color=" it only uses the color I specify an not any shades or highlights of that color. When I change the theme from "light" to "dark" or vice versa nothing happens (again, I'm having the same issue with the "HelloWorld" app). I feel like I've gone through all the documentation for themes a hundred times and am looking for anyone to point me in the right direction. I should add that for one reason or another the theme IS working on a random v-list-group in the nav drawer but not to the items above or below the group. I'm using Vue 2 and Vuetify 2.
Things I've Tried
Making a new theme using the theme generator on the Vuetify website and inserting it into the ./src/plugins/vuetify.js file as instructed by the documentation.
Attempted inserting the theme at the bottom of ./src/App.vue between the <script> </script> elements. This worked for someone else but didn't do it for me.
Completely uninstalled and reinstalled Vue-CLI using the command line.
Completely deleted and recreated my project.
Remaking my project using Vue 3 and Vuetify 3. This does work but Vuetify 3 does not yet have the components I need for my project.
When I navigate to a form using vue-router by adding a link with a <router-link> element, the form does not work. When I hit submit I get a 404 response.
However, if I navigate to it using an <a> tag (triggering a page reload) then it works perfectly.
I suspect that this has to do with the page rendering as a SPA and for some reason not loading an important part of the form for Netlify unless the form page is reloaded? Why is this happening and is there an elegant solution to the problem? I could just replace all links to forms with tags but I'm sure that there is a better solution, I just don't understand the problem well enough to find it.
For context, I am using Nuxt. The forms are recognized by Netlify on the backend and can accept submission with the tag link so that is not the problem.
Since you're using Nuxt, you probably should go SSG/full static with target: 'static' (hostable on Netlify-like platforms) or with target: 'server' (hostable on Heroku-like platforms) but at any point, you should have ssr: true (default value). When you do have this, the biggest part is done.
In Nuxt, you should use <nuxt-link> rather than <router-link>, it works exactly the same (takes the same params etc) but it's more specific to Nuxt and SSR/SSG compatible while <router-link> is not. More details here: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component
So, with all of this it should already work great. If it's not, I will gladly help you spot the issue if you have a github repo.
An alternative solution can be to use some form without any SSR dependency like Formspree: https://formspree.io/ (works fine with any SPA)
It works great, really simple. But I'd rather invite you to make a proper SSR form since you're using Nuxt.
PS: use <a> tags only for external links aka the ones which do not start with your domain name, nothing else. A follow of this kind of link is like a hard refresh and should be avoided at all costs.
EDIT: how to deploy by cleaning the cache.
EDIT on how to achieve a working form:
<template>
<div>
<form
netlify
action="/"
method="POST"
name="Contact"
>
<input type="hidden" name="form-name" value="Contact" />
<!-- ... -->
</form>
</div>
</template>
As told in the docs:
[...] inject a hidden input named form-name [...] and the hidden form-name input’s value matches the name attribute of form
Working fine. Could add a honeypot to it to make it even more secure!
I originally had Vuetify working perfectly in my app but somewhere along the way the styles of components broke and I'm not sure how to fix it.
For example, here is my Vuetify table:
Reality:
Expected:
As far as I can tell everything is setup correctly, I will say, I started using SCSS inside the modules but I don't think that is the problem.
The functionality of Vuetify is working like sorting and things like that but just the styles are broken it appears.
I am using nuxt version 2.8.1 for my website. Everything works fine, except nuxt-link on some pages.
I have a page, /drinks which is the listing page for drinks and /drinks/{slug} which is the detail page.
I first noticed the problem, in /drinks. None of the nuxt-link was working in that page. It got solved when I removed code that displays
validation error message from the form that is in separate component.
<span class='text-danger small'>{{ errors ? errors.first('name') : '' }}</span>
So, everything works on this page now. But, the detail page still has this problem. There is no components using validation in this page. No erros or warnings, in nuxt console, or browser console. Links just doesn't work. It updates the url, but, contents are not changed at all.
changing nuxt link to anchor tags works.
Another thing is, if I click any drinks in listing page to go to detail page, it works fine. Every link works. But, if I reload that page, or go to that detail page directly with URL, then nuxt link doesn't work.
I don't know, what is the problem exactly. How can, using vee validation in one component affect nuxt link in other components? And why is it not working?
Found the culprit finally. In case, anyone face similiar issue in future.
Vee Validate didn't support ssr, thus, it caused the problem with nuxt-link.
I am using another plugin Vue Carousel which doesn't support SSR as well.
So, wrapping carousel with solved the issue.
And, another weird thing, using v-html with p tag also affected nuxt-link.
So, I removed all p tags with v-html, used no-ssr for components that does not support SSR and the issue is finally gone.
But, I still do not understand why nuxt link is affected and why there are no error messages.
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.