I'm building a product similar to Intercom live chat widget (tawto, drift, crisp etc). Basically, what it will do is add a widget to users website and then render a chat box (in simple words). I'm planning to use VueJS for the entire project.
So here are my thoughts.
We provide users an embeddable js snippet. What it will do is add a div to the body with id = "app" (or something like that). Then the same script will inject VueJS compiled code. Will also add some external scripts like socket io, some CSS libraries etc.
Here are my concerns:
Should I build the project using CDN vue.min.js or the CLI with compiled codes? (I'm comfortable with CLI)
I need to isolate my CSS libraries from users website, that possible with 'scoped' style in VueJS right?
If I use CLI version, will it work in a subdomain, inner pages, and links? Unlike a full website, I'm going to use VueJS to create a widget on the website
I have used vuejs to create widget before so this is your answer:
You should build a normal project, import vue and compile it with all of your code to 1 file.
Yes
Yes
Yes
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'm going to develop a custom site (my own html/css/js, maybe using vueJS) for a client. She wants to be able to edit the content of her site after, add/delete/update images and text.
If I code the site by myself instead of using visual builders inside wordpress, is she going to be able to edit her site with the wordpress built-in tools or I'm the one that will have to make the changes whenever she needs?
Usually you would wrap your custom part of the wordpress website into a custom plugin. I'm assuming you can wrap a vuejs app, but I haven't done/ tried that yet. But definitely an inspiring question. I would give that a try.
This tutorial should get you started: Tutorial to create a custom plugin
Implementing the Vuejs SPA afterwards into that plugin should be manageable...
I would like to know if it is possible to use components from the JavaScript Development Tools (JSDT) in my own Eclipse RCP application.
For instance, my application should be able to show a JS editor view so that the user can edit JS files within my application. Is this possible?
I don't want to write a JS editor from scratch.
How can I integrate the components I need to achieve this? The package org.eclipse.wst.jsdt doesn't even show when I try to add it as a dependency of my plugins...
In a Derby.js app, I am trying to install skeleton through bower and include it in all derby apps. I know how to include styles within a single app, but can they be registered to all apps at once?
For instance if I had the following apps:
+ apps
- login
- myApp
- error
How could I add the required stylesheets to all apps, without having to explicitly call app.loadStyles(...) in each one?
Each app will need to call loadStyles. Derby bundles up apps individually and only serves up that bundle when using that app.
You can bypass derby's style loading and just reference your global styles like you might do any other 3rd party style sheet in the element of your html. You can accomplish this with a shared view but it wont be less typing.
What is the motivation? Avoiding more boiler plate?
I am tasked with creating a website using only client side techs such as HTML, CSS and JavaScript. We can't using any server-side tech because the instructor is too lazy to install anything and won't allow us to deploy using something such as Heroku. Is there a way I can do this? In particular I want to create partials for that navigation and footer without having to copy and paste them in every single file.
I know of two different approaches:
1. Using Ajax
You can use ajax to do this - probably with the help of a JavaScript library or framework.
JQuery's load can do things like $('#header').load('header-partial.html');
If you're building something more complex with a lot of views, etc... I'd consider using a MV* javascript framework like Backbone.js or AngularJS.
Check out the AngularJS seed project on GitHub for an example
2. Using a build script
If your site is simple enough that all you want to do is include a header and footer on each page, you should consider doing this as a build step in your deployment process. I.E. complile your html with the partials locally, and upload full pages, with the header/footer code on every html page.
This approach has the benefit of not breaking your site if js is disabled.
For an example, check out html5boilerplate's ant build script