I've decided to rewrite a web app using Vue.js but I'd like to start small and use my already working scripts for the main part of the app, while using Vue for other parts.
I'm looking into the Vue webpack template and I've tried to include multiple script tags into a component but vue gives me a warning that this can't be done.
I've successfully included the scripts into the main index.html and it's working but I think that's a really bad solution. What are some other ways to use Vue components with included js scripts?
Vue.js will work with any old scripts you have. If you are trying to "start small", just leave your old scripts on the page where they are, and start moving them slowly into components.
https://jsfiddle.net/crabbly/14kvkL6d/
You could start moving parts of the scripts into the ready method on your components, and start organizing them later into separate methods. Eventually it will be very organized and you will be using the full power of Vue.
https://jsfiddle.net/crabbly/9ux28qL9/
When using vue-loader and webpack, you will have to use module.export. Which shouldn't be hard also.
Start with smaller components.
Related
I know react is for Single Page Application. I have already build a complete application. I have a particular 3rd party integration that requires javascript and css files. I cannot add those external scripts as it breaks my entire application by overriding css and js.
I need to have a separate admin.html file which can have its own css and javascript tags. I do not want any conflict with my react app which renders on index.html
I tried to eject create-react-app and add a new admin.html.
https://github.com/facebook/create-react-app/issues/1084#issuecomment-568550609
But it uses only one page(index.html). This will not help me because I need completely a separate html file which I can import any javascript or css freely without any conflict on my index.html
Currently the possibility I thought was to create a separate react application just to render to this admin.html. So that there won't be any conflicts between javascript and css. But I want to know if there is an alternate way that I can achieve it in create-react-app. If so, simple example would be greatly appreciated.
PS: I need to redirect from one of components in my application to this new view admin.html with some data
I got a bootstrap theme that consists of HTML, CSS and Javascript. Now, I want to implement it (or let's say make it functional) in Vue. I have my index.html file that contains the container and it works. Now, my theme does have an index.html file as well. I just thought I can copy the whole file into the Vue-index.html and add the div with the id "app" around the area that changes the content. But it does not work. Basically, Vue does not load any external css or js files even though I reference them correctly (with relative reference using the dot: ./assets/css/style.css). It works inside a .vue-file (i.e. component) but not inside the index.html. What do I do wrong?
Yep, beginner here.
When you put them inside your index.html they are not compiled.
You can read about it HERE
Your index.html is something called a target. Vue uses this file as a mounting point for the rest of the application, so it's kept relatively clean, most likely with just metadata and a DOM mounting point. It works by loading the index.html in the browser and then mounting your Vue application on top of it.
If you're trying to apply some styles to a Vue application/components, your best bet is to modify *.vue files inside the app source of your Vue project (typically, /your-project/src). They will contain snippets of relevant sections/components alongside their logic (JavaScript) and styles (CSS/Sass), provided your project uses Single-File Components format.
For future reference:
It's hard to offer a solution without knowing the structure of your project, what type of components you are using, or even having code samples to get an idea of how things are working inside.
We'd need more information to be able to help you more accurately, so maybe you could create a lightweight demo on an interactive platform like codesandbox.io?
I am currently writing a small static site, and I have decided to use Vue.js as I have used it in the past without major issues. This time, I have to use a pre-made template which is jQuery/Bootstrap based and most of the heavy lifting is done through JS.
I am trying to use the Porto template. I have been able to convert the basics (CSS, add the router, etc) but I am struggling with the JS side of things. From what I have been able to understand, the different "components" that come from the template are activated once the entire page has been loaded. The init script goes through the HTML DOM and "activates" them.
Usually this works fine, especially when using an old jQuery style approach, but due to Vue's lifecycle for components, the JS is not re-executed once a new component appears on the page, therefore making it look like it does not work.
The most logical approach would be to take each Porto component, and splitting it out into Vue components, with their own JS, etc. But this means that any update to the template would require a full rewrite, without forgetting the amount of work to create the first version.
Currently, I have tried wrapping the <script> imports in a component, and inserting it into the page. My idea was to then use the this.$forceUpdate() method to force a re-render, but it fails.
Any other ideas?
I made some SPA using vuejs-templates/webpack and that's ok. But now I am developing a website, almost everything is static, so there's no need to be a SPA. I already made the pure html/css layout.
Now I will make some pages with forms and dynamic content, I would like to use vue components inside these pages.
Tell me which of this ideas is the best or give me a better option:
Multiple entries in webpack: I don't know very well how to do it, but I guess I can create a webpack project by scratch and render multiple entries that I include in the pages I want.
Use browserify: I didn't want to do this, but sounds like a good option... I could use vueify to render *.vue components
Use Nuxt: I never tried, but seems a good option too, I could make a "SPA" with SSR.
Tell me if you have another idea.
Thank you
Don't rule out just referencing Vue as a script file. No bundle, no compilation step. You lose single file components, but you can get something very like them by using js template literals. If your needs are simple and you don't want to impact on the rest of the site, this could be a fine solution.
I need to be able to dynamically include react components into my project, because I want to setup a plugin system and not every user has the same plugins/components enabled. Also they are/might get too big to submit all of them to every user. I tried to find out how to do that, but it seems that React might not support that use-case.
TLDR: How do I load React components from server when needed? Do I have to switch to Angular because react has no templateUrl equivalent?
React components are defined in JavaScript files, so you can load components in just as you’d load in any other JavaScript file. If you’re not using any sort of module mechanism like RequireJS, that might be as simple as injecting a script tag into the document. If you’re using something like RequireJS, you would just tell the loader that you want an extra module loaded.