I'm currently having the problem that the javascript related features in my component files breaks when switching to another route in VueJS.
In my Home.vue file, there is a revolution slider system and typed text that were included in the template I purchased. I am trying to implement Vue Router into the template. The template file has all the scripts that require to be included and the is in the content area of the template.
When I switch to some other route and switch back to the Home.vue route, all the javascript related features are broken. The revolution slider doesnt show and the typed text doesnt change anymore. Im assuming that this is because the Home.vue doesnt use the scripts anymore. What's the most optimal way to fix this? Is there some way to like reload the scripts when switching routes?
Im also using Laravel as backend framework.
Related
In my Laravel project, I use Vue 3 to make it a little more alive. Because I use several small Vue components over the entire page, I decided to move all the contents into a Vue handled container div:
<div id="vue-app">
<!-- all contents goes here -->
</div>
Unfortunately, I need to use third-party Laravel components, for example, x-honey from lukeraymonddowning/honey package. Now this component put some script tag in the middle of HTML codes, so into the #vue-app element.
And the Vue sends me warnings in developer mode. But in production, the page doesn't work.
I don't want to replace all of my good working third-party components just because of this.
So how can I make script tags to acceptable for Vue 3?
Using NodeJS to build an web app, I am using React and Pug together. I know that Pug is for rendering static content, and React is responsible for rendering dynamic content. I have a page that needs both.
Think about the Instagram web page, it has some static content, but when user scroll down to the bottom, it will load more pictures.
I have a Pug template, which in the end, I included the React script like this:
block scripts
script(src="/component/design-grid.js" type="module")
And I want to trigger my react code by doing(This won't work):
script ReactDOM.render(<DesignGrid mainPage={true} category={"daily"} verified={false}/>, document.getElementById("grid-container"));
What's the standard way to accomplish something like this?
I have SPA with Laravel and I have main.js file and I set up this file in my main.blade.php file and I write some code in main.js with jquery plugins. Problem is when I change vue-router not working this plugins so main.js file, but when I refresh page everything is fine working.Any idea?
I have a similar issue with angular with using jquery plugins. As vue and angular are SPA(Single Page Application).
The reasoning for this is when the whole document loads, jquery onDocument.ready() will then kick off - enabling event handlers to listen and attached to HTML DOMs.
Using SPA Routers to navigate through your application will not load again everything. So jquery cannot attach listeners to your newly rendered views.
Find a way to manually initialize those jquery plugins.
I bought a layout to build a web app and then I made a specific part in angular 2. In this web app all the styles come from css files that came with the layout, but, when I add to a page and try to bootstrap my angular application, it disables all the styles and script in the page. What can I do to make angular to run without messing the styles and scripts that are out of the application?
I'm sorry if I was not so clear.
Without some more details, I'm not entirely sure. I don't believe Angular.js makes any CSS or styling changes on its own. I would also try to move your bootstrap CSS link above your layout. When your layout css file loads it will overwrite bootstrap's CSS. Thought I am not certain how much of Bootstrap's Javascript will overwrite.
I was using twitter bootstrap within my angular project and in my non-angular page I was using too, so, angular was changing all the page style by the twitter bootstrap built in it and all the styles was being missing. After removing the twitter bootstrap built in my angular app, everything became fine now.
Is there any way to switch page, using ons-navigator without ons-template tag?
For example, i have project like this:
--app.js
--index.html
--page1.html
When i describe page1.html into index.html, using ons-template (like this http://codepen.io/onsen/pen/yrhtv) everything is going OK. But if i'am trying to set path into
myNavigator.pushPage('page1.html', { animation : 'slide' } )
without using ons-template my app doesn't work.
You can use <ons-template> without <ons-navigator> but not the other way around. Navigator object is something like Angular routing system and it needs templates in order to send data between pages.