I've been learning wordpress and I'm trying to figure out how to use Vue with wordpress. I'm currently just trying to do the basic CDN vue or link the vue file so that I can do basic things to interact with my page. Not worrying about vue components or anything that will be way more work if it works at all with wordpress lol.
Is this even possible to do with wordpress? Think the basic js fiddle's for vue where your js file interacts directly with the page (not components compiled and stuff). I just want to do simple things like make my navbar change color if its not at the top, basic stuff with buttons, etc. I really like using vue so if I can I'd rather use vue than have to make straight js to do these things. But I cant figure out how to get it set up.
Thanks.
Related
I'm working with some developers to create a website, and I want to know if React will work if I hire someone to create the html and css first, and then have another person integrate react with those templates
Is react integratable in this situation, or does react have to be used from the get go? I am a python programmer, so I have no clue how react works lol
The main advantage of React is being able to generate HTML based on JavaScript code, if the HTML code is already done I'd find it kind of pointless to use React.
I am just a 2nd year student but I'd recommend to use React from the get go.
It should technically be possible to integrate react with already existing html/css files, just like you can manually alter the html and css files in your react project’s public folder, but you dont really provide a good reason for doing so. It might be easier, and more sustainable for maintaining the project to simply move your existing Html into a react project. If you dont have an actual good reason to use react for this project (like for example having primarily react-experienced developers on the team or needing to use specific react libraries and functionalities), there is no real harm in developing a website with plain html, css, and js.
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'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 have been looking for a few hours for something that could help my problem, but as of now, I havent found it.
The problem is:
I am working on an PHP/Latte server-side rendered website, where I have decided to implement Vue. However, since there is no possibility for me to change this website into an SPA, I need to just create micro components with Vue and use them inside the BE templates.
By that I mean that there is a .latte template, where I insert a <My_component /> element, which gets rendered client side.
Which is fine for some components, but others, like the main menu, product or something else important for SEO purposes, needs to be somehow pre-rendered for crawlers.
By now I have read 10+ articles and watched 4 videos on prerender-spa-plugin, which I am sure is a great solution for SPAs, but I dont think it would work for my case. Especially since I am not using Vue router.
Nuxt.js also seems like not what I want and would be a bit of an overkill in my case.
Basically I just need a webpack or Node based plugin, that would take .vue files, that I would need to be pre-rendered, and create (build) the static HTML for them. Which would be either automatically or by hand inserted into the .latte template.
Has anyone had any experience with this?
My team developed a django website with lot of pages that working completely without javascript or may be with the little jquery manipulation. We want try to use a react library to speed up our pages and add page navigation without full page reloading (we choose react because we implemented some SPA website with react and we like it). Also our pages should working with disable js.
I want to start with one page with 5 forms on it. If any form is submit then page is reloaded, data populated in fields is lost and it work slowly. I think to implementing sending data on ajax and change some html after server answer.
Every react tutorial is saying to write jsx components with html markup inside, convert it with babel to pure js and adding on page dynamically on page load. Or if you want to render pages on server you need to use standalone node server. But I already has a powerfull django template engine to render templates on server side, also I need to render templates with specific django things like multilanguage content, user variables etc.
Can I fully render page with django on server side and after loading say to react, that specific div it's a component with initial state and existing html markup? Or may be you can tell me another solution, without fully rewriting my website. Thanks.
Well, kind of. Every react app starts by specifying a root HTML element to render from. If you want to only render a portion of your website with react, just specify an element that covers the section that you want. Something like this:
ReactDOM.render(<MyMainComponent />, document.getElementById('myReactSection'));
However, in doing so, any existing HTML in there will be overwritten (https://facebook.github.io/react/docs/react-dom.html#render). So you'll need React to re-render the html that was already in there.
Also, you don't NEED babel to write react code, it's just very useful (in conjunction with webpack) to generate a single javascript bundle file to send over to the client that was originally written using the awesome new ES6 syntax (https://babeljs.io/learn-es2015/)