So I am trying to use Vue & Django with django-webpack-loader (not DRF), but I'm just getting stuck whenever I try to actually feed Vue data. I am just trying to convert a static Django template to a (.vue) Vue template but I'm not sure how Vue is meant to handle that data?
I'm under the impression that you do something along the lines of this in the script tags:
new Vue ({
data: function () {
game: {{game}}
}
});
And then reference this with {{game.title}} etc in the main html of the Vue template, using Django {% verbatim %} tags so they don't interfere right?
But this just doesn't do anything, Django doesn't give Vue anything and I just get error 'game:' is defined but never used and error 'game' is not defined. I'm just not sure where to go from here and I just need some sort of help...
If I understand correctly that you're trying to have Django directly serve *.vue Single File Components (SFC), then I don't know of anyway that could work. These files will need to be separate from Django so that Vue/webpack can build them into JS.
But there is another way to integrate Django Templates with Vue SFCs. I (humbly) recommend reading my series of articles starting with Vue + Django — Best of Both Frontends. This will walk you through all the steps to do so, freely mixing Django Templates and Vue SFC wherever/whenever you deem appropriate.
There's a companion repo with a ready made Django+Vue starter app.
Otherwise, if I've misunderstood your intention, please clarify so we can better answer.
Related
This is probably a very basic question so bear with me I come from a jquery background and I'm a bit confused on how to structure code in Vue.
I have a laravel project set up with vue.js so one app.js file.
Let's say I have a set of directives in that app.js for registering a user :
const app = new Vue({
el: '#app',
data: {
errors: [],
email:null,
first_name:null,
last_name:null,
...
},
methods:{
register: function (e) {
//Do stuff
}
});
Now what if I now want to write code for another page, let's say a crud application to list the users where should I write the Vue code ?
I guess I could add to my app.js file but I will soon end up with a huge app.js file and I do not want to expose methods in pages that do not require them.
What is the correct way of doing this, I guess there must be some kind of routing going on somewhere ?
In Vue, you can make use of components for implementing different pages ad even inside a page you can then make child components.
Each component consists of the template i.e., HTML code, script, and its respective style.
Making use of components makes the code more maintainable, reusable, and understandable.
You can check this link for understanding more about the components: https://v2.vuejs.org/v2/guide/components.html
For routing, there is an official router for Vuejs which is Vue router. You can find more on the router on https://router.vuejs.org/.
https://www.reddit.com/r/Clojure/comments/4el0xi/how_to_use_an_existing_reactjs_component_with/
There is this existing post about using existing ReactJS components in a CLJS/Reagent project. I'm looking to do the opposite. I have a bunch of CLJS components and would like to compile them into a ui library of some sort so that they can be used by React developers. That is, if I have a button CLJS component, I would like to be able to render that Button using < Button /> or mylib.Button(_) etc.. in a React/js app file.
I have read this - https://shadow-cljs.github.io/docs/UsersGuide.html#target-node-library - extensively but it's not quite working out. I've been using ":target :node-library" and I can get simple functions (that return strings/numbers, for example) to compile and work in my app, etc.. but it doesn't work for entire components. For example, my cljs button component takes in :
defn button [props & children]
but when I try to pass in these parameters (I call {lib.button({}, {})} in my App.js file), I get errors like "No protocol method IMap.-dissoc defined", because I'm trying to pass JS objects into CLJS-only functions, I believe. Not sure how to resolve this..
I can explain more on this if it would help clarify. It would also be super helpful if anyone had a reference demo project or any resources they could link me to.
I only have a few suggestions:
You can try to build a new sample project to consume your library with lein new figwheel myproject and use JavaScript interop to move one step at a time closer to the native JS way of using your library.
You can create an interface namespace that can consume JS objects and wrap these into Clojure data structures to sort out the protocol errors you're seeing, eg. functions that take a props parameter and pass down (js->clj props) to the rest of the code underneath.
For the authoritative source, check the Reagent docs, especially this: http://reagent-project.github.io/docs/master/InteropWithReact.html#creating-react-components-from-reagent-components
Hi I have an existing project which uses alot of knockoutjs.
Im attempting to add vuejs to the project and slowly move everything over to vuejs in time.
Ive added vue to a wrapper element which contains the whole page and created a single vue component.
My aim is to use that component anywhere on the page but not break my knockout code.
The problem im having is my knockout bindings are not being defined when I apply the vue el tag to the main element that wraps the page and the ko.applyBindings scripts. (vue elements work ok but all ko scripts throw an error )
I am using complied templates and the vue-cli with webpack-simple.
Im pretty new to vuejs but I think this is happening because vue is trying to parse the knockoutjs code inside the page html
console error:
ReferenceError: Unable to process binding "slideVisible: function(){return !isShowBillingForm() }"
Message: isShowBillingForm is not defined
at slideVisible (eval at parseBindingsString (knockout-3.3.0.js:61), <anonymous>:3:65)
at init (slidevisible.js:15)
at knockout-3.3.0.js:65
at Object.u (knockout-3.3.0.js:35)
at knockout-3.3.0.js:65
at Object.o (knockout-3.3.0.js:10)
at g (knockout-3.3.0.js:65)
at h (knockout-3.3.0.js:63)
at k (knockout-3.3.0.js:63)
at h (knockout-3.3.0.js:63)
If anyone could help me that would be amazing
(Ive also added the vue cdn to the header and added in vue markup into the page directly and their are no conflicts) so I guess its something to do with the compiled templates?
I've added Vue to a wrapper element which contains the whole page and created a single Vue component.
I believe that's the issue. When migrating to VueJS from legacy Knockout you will have to pick and choose where you want to use Vue.
The way Vue parses the DOM is very different compared to Knockout. It uses a concept of virtual DOM, so the final DOM output is only valid HTML and no framework specific markup. That inherently will break any KO code bound to it.
So the approach I'd recommend is finding pieces of the app you want to convert to Vue and then instantiate Vue inside a Knockout VM (or with plain JS) like this:
import Vue from 'vue';
import MyVueComponent from 'libs/components/my-component.vue';
const propsData = {my: props};
const myComponent = Vue.extend(MyVueComponent);
new myComponent({el: '#some_element', propsData: propsData})
Also important, make sure you tell KO not to process #some_element that Vue is bound to by using the stopBinding handler as described here.
Hope that helps!
I keep getting this same error. My code is shown here:
https://codesandbox.io/s/88o66kkyz9
For those who need an idea of what it does, it gets lists of IPs from a websocket in the main Vue.js. I want to create a component to layout information about the IP so I can just iterate through that in the app.vue render template I know this is basic, but I'm really new to vue. but god, so much better than angular messiness to me.
How does jquery.ui or modernizr generate code on the fly after you select which modules you need to include?
Is it grunt with plugins like this https://npmjs.org/package/assemble or nodejs or PHP ?
I've read jquery.ui switched to node for their download builder. I want to build something similar.
I have html template and need different css colors or javascript components every time user generates a template. So, form with checkboxes os perfect in my case, just like jqueryui or modernizr.
Any help is appreciated.
I'm on the core team for assemble, and first and foremost Assemble is just another Grunt.js plugin, we're just trying to make it easy to build components and sites by leveraging Grunt - since it is such an amazing build system.
The reason we created Assemble is for a similar use case to what you're describing. As programmers we always read about best practices of keeping data, structure, styles and so on separate. In theory, this sounds great, but in reality we couldn't find any tools to help us achieve maintain code this way.
We did find tools that we admire, like YUI and jQuery UI, both of which offer powerful and interesting ways to work with modular, reusable code. But we decided to build Assemble because we wanted the flexibility to use whatever templating framework or data format was required for the job at hand.
So here is how you might build an example UI component with Assemble:
The component will be a simple Bootstrap alert
Templating language is Handlebars
Data format is JSON, but we could alternatively use YAML or YAML Front-matter
The variables I'm using in the example are arbitrary, make them whatever you want
Template: alert.hbs
<div class="alert {{ alert.modifier }}">
<strong> {{ alert.strong }} </strong> {{ alert.message }}
</div>
Data: alert.json
{
"strong": "This is an alert",
"modifier": "alert-info",
"message": "This alert was assembled from a Handlebars partial and JSON data"
}
In the actual assemble task, there are a few ways you can build the templates, but let's say you want to build a bunch of components just like the alert into individual pages for documentation:
// Project configuration.
grunt.initConfig({
assemble: {
options: {
// built-in variable for resolving relative path to specified folder
assets: 'dist/assets',
// "layout" to wrap pages with header and/or footer
layout: 'src/layouts/default.hbs',
data: 'src/data/*.{json,yml}'
},
pages: {
files: {
// This is where "pages" are usually defined, but here we're pointing
// to the partials folder to build them into pages for documentation.
'dist/': ['src/partials/*.hbs'],
}
}
}
});
Going further, you could easily add variable to the JSON file, or to YAML front matter in the partial to specify the stylesheet to use for the component.