I am new to Vue.js, and I'm a little confused about how to use Vue.js in a non-spa project. In my case, I'm going to use JSF for my front-end, and I want to have some components just like button, filter and so on that can be used on different pages. Is there any tool that can convert .vue to pure .js so that I can include the .js in my jsf page? And the most important thing for me is, is there any tutorial or document about non-spa use that I can refer to?
The beginning of the Vue.js guide should explain this type of use. The .vue files are for convenience. You can still create Vue components in a regular .js file. For example (from the Vue.js guide):
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
Related
I’m trying to figure out how to use vue cli. I have an idea for a project and would like to use the follow tech: vueJS, Typecript, and nodeJS(expressJS, socket.io)
How do I go about creating a template with all the config/json/vue files. There are just so many files and they need to be in specific places it gets confusing!
Does anyone know if a template for these types of projects? Or better yet a way to generate them?
EDIT: The way to create a new project template with Vue-CLI is by using the vue create command. You can set your own techstack from there. If you need a more opinionated template, you can use the resources below.
Most well-known and detailed vue boilerplate around:
https://github.com/chrisvfritz/vue-enterprise-boilerplate
If it's too advanced/extensive for your project, there are plenty of examples/templates here:
https://github.com/vuejs/awesome-vue#examples
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 have a web app developed in Laravel with blade.html views, I want to create a new feature which will be created in React Js and it will use some of html view files.
Now i have tried setting "innerhtml" and including html view files in react js but i can't access my php variables and methods.
how can i include html view files in React Js?
innerhtml will not work for React.
Take a look at dangerouslySetInnerHTML.
It can be used in this way:
<div dangerouslySetInnerHTML={{__html: 'First;<br/> Second....'}} />
Although, writing your views in react would be the better option if that is doable.
I have a design of the website which contains javascript without any framework. Now I'm in the development process and I need to use javascript framework like react for a specific process. so, will it work or I need to transform everything into a framework? I'm working with Laravel and how can I make multiple react app for a single website inside Laravel framework?
Yes. This is exactly the problem that Facebook aimed to solve by creating React. They initially only used React for parts of the comment system and their chat.
You can create a React component and use it in only part of your website. You just need to provide it a place for it to mount. That is, a div where you are mounting your application.
Check the documentation for React DOM and the integration guide for more information about rendering to the DOM. The basic idea is to create your component then use the following code to render it:
ReactDOM.render(element, container[, callback])
From the React docs:
React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.
To integrate React with other libraries or frameworks, check out the React integration guide: https://reactjs.org/docs/integrating-with-other-libraries.html
Yes you can create global window renderer functions from react library and call it from vanilla js or some other third party library like jquery .You just need to include the minified js to call that function.
Some thing like below on react
const app = (parameter1,parameter2) => (
<YourComponent parameter1={parameter1} parameter2={parameter2}/>
);
window.renderYourComponent = function (p1, p2) {
render(app(p1,p2), document.getElementById('your_div'));
}
On your vanilla js
<script type="text/javascript" src="your_minified_react.js"></script>
<div id='your_div'></div>
window.renderYourComponent("p1","p2");
Everything will be rendered inside 'your_div' and you can work separately on react
Yes, You can make multiple React apps for a single website inside the Laravel framework.
The Laravel often uses a blade template for frontend UI.
What you need to do is build the React app and integrate the built React app with the Laravel blade.
You can copy the whole built contents of the React app into the Laravel home blade, for example.
In addition, inside React to import custom Javascript files, you can use several ways like script tags and also webpack copy module.
I am very new to Angular Js and I am having some difficulties with my web application.
So I have a .state to load a page for my website. I am trying to load a .js file that is written in REACT and I tried including the path for the .js file in the "templateUrl" component but it does not work. I only get the REACT code written in the browser. I also have a CSS file to be included as well.
Thanks !!
I think,
the best thing is this make a directive in react js and load that directive in angularjs templates.