I am facing difficulties with my VueJS deployment. I have an accordion based on this : https://bootstrap-vue.org/docs/components/collapse#accordion-support
Everything works perfectly on my local project but when deployed on Netlify, it seems that the accordion is completely broken, first tab open and clicks on others dont trigger anything.
There is nothing appearing in my console.
I wonder if I need to include jQuery or Bootstrap in my app or bootstrap Vue is supposed to make them useless ?
Thanks
Related
I have built a simple Vue app. Currently it only has one screen.
I am trying to convert this app into a "module". ie: I want to be able to give somebody a script tag. They put that script tag into a generic HTML page. And when that script tag loads, it should render my VUE app.
I could give them an iframe, but I'm trying to do it via a Script Tag so that they could skin the app using their own CSS.
Can anybody guide me into where to start with this? I am using CLI VUE; so there are some files getting built. Is there a better approach than simply giving URLs to all the JSS and CSS files that are currently being generated by webpack?
I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the browser's extensions icons toolbar) indicating that it detects Vue on the page--however, the Vue tab never appears in the Chrome dev tools.
Should the Vue devtools extension work with just Vue custom elements on a page? I tried the troubleshooting steps in the F.A.Q., but none seem to apply. (I also turned off all other extensions and restarted my browser.)
Note: I am using a 32" 4k monitor, so I am definitely seeing the full Chrome dev tools UI.
Note 2: I have tried using the Vue devtools with my custom element rendered in a shadow DOM and without one.
Without a shadow DOM:
With a shadow DOM
Here is a link to the Vue.js GitHub issue with a helpful comment for the PR for making the shadow DOM wrapper optional.
defineCustomElement without shadowDom #4314
I am new to Vuejs. I have created a Vuejs project, but I have to re-run the project each time to reflect the changes in browser. The project is created by(default vue 3)
vue create projectname
Look into VITE. It's made by the same guy who made vuejs. It does what you're asking about with Hot module replacement (changes made show up instantly in the browser). It's amazing. I'm not sure if you can update an existing project to use vite, but it's dead easy to start a new vue3 project with vite.
We have some issues with SmartEdit after upgrading Spartacus to 3.4.4.
Locally SmartEdit works fine, issues are present on our stage environment.
Contextual menu to edit components is missing on all slots but only on our homepage, and content of components is overlapping. All other pages don't have these issues.
We tried the following to solve this but nothing worked:
updating Spartacus styles
removing lazy loading, deferred loading and enabling SSR on components that are used on our homepage
downgrading Spartacus to 3.0.0
hiding component after component in SmartEdit to check if those issues are maybe caused by one of them
However, contextual menu shows up after changing route two times, i.e. going to login page, then back to homepage and repeating the step. When contextual menu shows up, content of components is not overlapping anymore.
What we also noticed is that locally we're using Angular 10, which is needed for the Spartacus 3.x, but somehow on our stage environment we have
Angular 8. Also, in SE preview mode we see this ySEEmptyClass shown in slots.
Another issue we found in SmartEdit, when we open one i.e. one category page but directly on stage (not navigating from homepage) we see empty slots and a spinner - same for the PDP.
Any ideas on how we can solve these issues? Is anyone facing similar problems?
I had issues with SmartEdit on Spartacus version 4. It kept showing up with the loading spinner too.
What I did to fix it was add to my index.html the following line:
<script id="smartedit-injector" src="assets/webApplicationInjector.js" data-smartedit-allow-origin="localhost:9002, development_environment_url.com:80"></script>
Perhaps try adding all your URLs (staging, dev, prod, etc) to the data-smartedit-allow-origin field?
I am trying to build a VueJS webapp that has the whole VSCode editor embedded inside of it similar to codesandbox. What part of the vscode codebase do we need in order to get the entire VSCode running inside of VueJS?
So my idea was that I would have a navbar and underneath the navbar I would have the VSCode Editor.
You don't need VS code codebase, since it wouldn't work out of the box in the browser, like you want to. Take a look at Monaco editor, it is basically VS Code editor for browsers.