givesocialmovement / sbt-vuefy Goto Github PK
View Code? Open in Web Editor NEWUse Vue.js with Playframework
License: MIT License
Use Vue.js with Playframework
License: MIT License
The current example is working as a SPA from my understanding. Is it possible to send as a ssr rendered page.
Since 1st of May, the bintray repository has been deprecated. Could we move the packages to some other repository?
Hi,
I try to import and use vue-resource
in multiple components.
First, I tried to import in each single file component, but got the error Cannot redefine property: $url
Second, I tried to import vue-resource in the index.scala.html, when instancianting Vue :
<script>
import Vue from 'Vue'
import Resource from 'vue-resource';
Vue.use(Resource);
Vue.config.productionTip = false
Vue.component('v-header', Header.default);
Vue.component('product-page-cart', Product.default);
new Vue({
el: '#app',
data: ...
</script>
But I get the TypeScript compilation error on my component files : Property '$http' does not exist
I now try to have a main.js file, but still gets the $http does not exists
error.
How do you get vue-resource
working in a realworld project ?
Regards
Thank you for the sbt-vuefy plugin!
Our project-build recently started failing, because the Bintray repo isn't available anymore.
Is there a plan to move to another repo soon?
We're using version 5.0.0
Many thanks
The provided example works fine when using a render function in index.scala.html. However, I'd rather want to not use a render function as simple "loader", but instead use custom tags like <greeting-form>
in the Twirl template. E.g.
@(greeting: String)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src='@routes.Assets.versioned("vue/components/greeting-form.js")'></script>
<div id="app">
<p>Container</p>
<greeting-form v-bind:greeting="'@greeting'">
</div>
<script>
import('@routes.Assets.versioned("vue/components/greeting-form.js")').default
Vue.component('greeting-form', GreetingForm);
var app = new Vue({
el: '#app'
})
</script>
How can we achieve this behaviour?
Thanks!
There may be an issue generating component .js files when building on Windows. I have a component named LinkViews.vue that generates a corresponding link-views.js. On Windows, I get this error in Chrome: "Uncaught SyntaxError: Invalid or unexpected token" relating to line 1 in link-views.js, which looks like this:
var Vue\components\linkViews =
Comparatively, on MacOS or Linux there is no error. The line looks like this:
var LinkViews =
Seems related to the fact Windows uses backslashes instead of slashes. Let me know if you don't have access to a Windows machine and need me to test a possible fix.
Thanks, Nir
The instruction indicate that to create production deployment, you should use sbt stage
. However, in the basic test app this does not yield a runnable build:
$ sbt stage
[info] Loading settings for project plugins from plugin.sbt ...
[info] Loading settings for project sbt-vuefy-build from plugins.sbt ...
[info] Loading project definition from /Users/nford/echelon/sbt-vuefy/project
[info] Loading settings for project sbt-vuefy from version.sbt,build.sbt ...
[info] Loading project definition from /Users/nford/echelon/sbt-vuefy/test-play-project/project
[info] Loading settings for project root from build.sbt ...
[info] Set current project to test-play-project (in build file:/Users/nford/echelon/sbt-vuefy/test-play-project/)
[info] Packaging /Users/nford/echelon/sbt-vuefy/test-play-project/target/scala-2.12/test-play-project_2.12-1.0-SNAPSHOT-sources.jar ...
[info] Done packaging.
[info] Wrote /Users/nford/echelon/sbt-vuefy/test-play-project/target/scala-2.12/test-play-project_2.12-1.0-SNAPSHOT.pom
[info] Main Scala API documentation to /Users/nford/echelon/sbt-vuefy/test-play-project/target/scala-2.12/api...
[info] [Vuefy] Compile on 1 changed files
[info] /Users/nford/echelon/sbt-vuefy/test-play-project/node_modules/webpack/bin/webpack.js --config /var/folders/83/9023vzns5vjd_fnfmtskwddw0000gp/T/sbt-vuefy3744603403231261495/webpack.config.js --output-path /Users/nford/echelon/sbt-vuefy/test-play-project/target/web/vuefy/main -p
Webpack for development
model contains 17 documentable templates
[info] Main Scala API documentation successful.
[info] Packaging /Users/nford/echelon/sbt-vuefy/test-play-project/target/scala-2.12/test-play-project_2.12-1.0-SNAPSHOT-javadoc.jar ...
[info] Done packaging.
10 modules
[info] Webpack exited with 0
[info] [Vuefy] finished compilation in 11361 ms and generated 1 JS files
[info] Packaging /Users/nford/echelon/sbt-vuefy/test-play-project/target/scala-2.12/test-play-project_2.12-1.0-SNAPSHOT-web-assets.jar ...
[info] Done packaging.
[info] Packaging /Users/nford/echelon/sbt-vuefy/test-play-project/target/scala-2.12/test-play-project_2.12-1.0-SNAPSHOT.jar ...
[info] Done packaging.
[info] Packaging /Users/nford/echelon/sbt-vuefy/test-play-project/target/scala-2.12/test-play-project_2.12-1.0-SNAPSHOT-sans-externalized.jar ...
[info] Done packaging.
$ ll target/universal/scripts/bin/
total 28
drwxr-xr-x 4 nford staff 128 Feb 14 14:51 .
drwxr-xr-x 3 nford staff 96 Feb 14 14:51 ..
-rwxr--r-- 1 nford staff 12575 Feb 14 14:51 test-play-project
-rw-r--r-- 1 nford staff 8441 Feb 14 14:51 test-play-project.bat
$ target/universal/scripts/bin/test-play-project -Dplay.http.secret.key='Q]WIB@IDFbM8odLosr[PyZJNT:r:tpP^I6iFV[ObJgcF@DQ3X`Hzu/aS?v?/aD:Q'
Error: Could not find or load main class play.core.server.ProdServerStart
Caused by: java.lang.ClassNotFoundException: play.core.server.ProdServerStart
(The key used here is just one I generated locally to test this plugin.)
Looking at the Play Framework deployment documentation it seems like they recommend using dist
for a production artifact and stage
for testing production 'in place'. However, while using dist
(as in sbt dist
) creates a deployable artifact it doesn't seem to include any of the compiled javascript. Similarly, using target/universal/stage/bin/test-play-project
results in a runnable application but no compiled Vue assets. (The server says the javascript doesn't exist.)
I'm by no means an sbt expert but I'm not clear what needs to be done to close the gap. In the documentation you indicate using the -p
flag, but I don't know what that refers to (sbt stage -p
just fails). Any thoughts on what might be going on here?
Webpack 4 has been released for a few months now. Let's move to the version 4.
My project isn't compiling due to an error in the build.sbt -- it's giving an error value / is not a member of sbt.Configuration
It also points to the / in the line Assets / Vuekeys.vuefy ...
and says that there's an type error in expression -- how should i resolve this?
Thanks so much for making this! I'm very excited about the possibility of using sbt-vuefy to create single-page components instead of having them in template files. It took me a while to figure out how to set it up. The library dependency for sbt-vuefy doesn't seem to resolve on Play 2.5 so I had to upgrade to Play 2.6, and since I'm completely unfamiliar with npm and webpack, I didn't realize I was supposed to copy package.json from the test project to my own project and run npm install.
I only have one (recursive) Vue component right now for displaying threaded comments, and it works great in the template, but when I move it to a .vue file, even though it compiles just fine and the comment tree displays initially, a lot of the reactivity is gone. In link-comment.vue, I define these props:
props: {
comment: { type: Object, required: true },
commentArray: { type: Array, required: true },
}
And instantiate thusly:
<link-comment v-for="childComment in comment.replies"
:key="childComment.commentId"
:comment="childComment"
:comment-array="comment.replies"></link-comment>
All of the reactive data is really in the comment prop, which is an object that has various attributes, example json:
{
commentId: 368,
userName: "Kirk Avocado",
commentText: "The universe was a mistake.",
likeCount: 1,
liked: false,
ownComment: true,
replies: [...]
}
These two methods for example, change comment.liked, comment.likeCount, and the comment.replies array, and I can verify in the browser debugger that the object data changes and stays changed, but none of the changes are rendered:
toggleLike: function() {
let comment = this.comment;
$.ajax({
method: 'POST',
url: comment.liked ? '/api/unlike_link_comment' : '/api/like_link_comment',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ commentId: comment.commentId }),
dataType: 'json',
success: function (response) {
if (comment.liked) {
comment.liked = false;
comment.likeCount--;
} else {
comment.liked = true;
comment.likeCount++;
}
},
error: function (req, status, error) {
}
});
},
deleteComment: function() {
let data = this;
if (confirm('Delete your comment?')) {
$.ajax({
method: 'POST',
url: '/api/delete_link_comment',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
commentId: data.comment.commentId
}),
dataType: 'json',
success: function () {
data.commentArray.splice(data.commentArray.indexOf(data.comment), 1);
},
error: function (req, status, error) {
}
});
}
}
Weirdly other changes like editing a comment (which changes comment.commentText) or adding a reply (which modifies the comment.replies array) do render. There's no rhyme or reason to it.
I realize this seems more like a VueJS problem, but it all works when the components are in the template, so I'm wondering is something is lost along the way when the .vue file is compiled that breaks reactivity...
I'm happy to send you the entire .vue file and complete JSON data to initialize it with if you deem it necessary.
Thanks, Nir
after creating a bunch files(simply copy greeting-form.vue
up to 100), I was getting "command line too long" error when using sbt stage
on my Windows10.
I am not able to add plugin as I get:
Error:Unresolved dependencies: givers.vuefy#sbt-vuefy;3.0.0: not found
This is how my plugins.sbt looks like:
// The Play plugin
addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.6.2")
// Web plugins
addSbtPlugin("com.typesafe.sbt" % "sbt-coffeescript" % "1.0.0")
addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.0.6")
addSbtPlugin("com.typesafe.sbt" % "sbt-jshint" % "1.0.3")
addSbtPlugin("com.typesafe.sbt" % "sbt-rjs" % "1.0.7")
addSbtPlugin("com.typesafe.sbt" % "sbt-digest" % "1.1.0")
addSbtPlugin("com.typesafe.sbt" % "sbt-mocha" % "1.1.0")
// Play enhancer - this automatically generates getters/setters for public fields
// and rewrites accessors of these fields to use the getters/setters. Remove this
// plugin if you prefer not to have this feature, or disable on a per project
// basis using disablePlugins(PlayEnhancer) in your build.sbt
addSbtPlugin("com.typesafe.sbt" % "sbt-play-enhancer" % "1.1.0")
resolvers += Resolver.bintrayRepo("givers", "maven")
addSbtPlugin("givers.vuefy" % "sbt-vuefy" % "3.0.0")
Would you be able to add "use strict";
to sbt-vuefy-plugin.js
? Keep getting SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
when I run sbt.
Hi,
I'm using your seed for my company, this was very helpful, thanks.
To optimize my front-end application, I want to have multiple JS entrypoints (Vue3)
I managed to produce my multiple entrypoints files, to call each specific script per page (in scala template), like :
One file for my shop page
const app = createApp({});
app.component('v-header', Header)
app.component('v-shop', Shop)
export default app.mount('#app');
One file for my cart page
const app = createApp({});
app.component('v-header', Header)
app.component('v-cart', Cart)
export default app.mount('#app');
But I dont manage to have a library like vue-toaster in my Header
component
Because my header is like : export default defineComponent({})
And I dont have the app instance to call app.use(Toaster)
like I should.
Did you get something like that working ?
Regards
I've run into an error when starting the app:
ERROR in ./vue/components/common/our-button.vue
Module build failed: Error:
Vue packages version mismatch:
It was using my old version and npm install vue
helped, but I suggest to add vue itself also as dependency to ensure this works out of the box.
Cool project - exactly what we consider using in our next project. Thanks!
Looks like an interesting project but I cannot compile the test project. The error reads -
error: not found: value SbtVuefy
This has brought up other errors on the build as doesn't recognise Assets
or VueKeys
. So it seems that the SBT files aren't available for some reason. The build/spec is the same of course, i.e. Scala 2.12.8 / SBT 1.2.8 / Play 2.7.3
. I've read this similar issue - but it didn't help. To note: I used npm install
instead of yarn install
as I wasn't able to install yarn
with the error -
'yarn' is not recognized as an internal or external command, operable program or batch file.
Hopefully that's not an issue. Any help/guidance is greatly appreciated!
_
This is because the reasons field of Webpack's stats doesn't include CSS.
I think we need to fix either https://github.com/vuejs/vue-loader, https://github.com/webpack-contrib/css-loader, or https://github.com/vuejs/vue-style-loader
Any suggestion about how vue works with Play's Redirect statement:
like in the controller will return
Redirect(routes.Controller.viewSomething()).flashing("success" -> "success.")
then vue will get a response with the rendered html data. Is it possible to use this data rerender the page in vue?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.