In this page:
https://github.com/vaadin/vaadin-core-elements
I see that vaadin-grid should be supported in a Polymer 2 application.
I tried in every way to make this (vaadin) example work:
<vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"}, {"name": "Ringo", "surname": "Starr", "role": "drums"}]'>
<vaadin-grid-column>
<template class="header">Name</template>
<template>[[item.name]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Surname</template>
<template>[[item.surname]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Role</template>
<template>[[item.role]]</template>
</vaadin-grid-column>
</vaadin-grid>
But I get every sort of errors inside the vaadin source code...
Has anyone ever tried to use it in a Polymer 2 app?
Thanks
Andrea
To use vaadin-grid in Polymer 2.x download vaadin-grid v3.0.0-alpha2. You can download it using following command:
bower install --save vaadin/vaadin-grid#v3.0.0-alpha2
Vaadin-grid version 2.x doesn't support Polymer 2.x.
Reference.
Related
Hi I would like to change a projects version of Vue using npm.
I tried :
npm install vue#latest --save
But when I tried :
npm v vue
I got the following :
vue#2.6.14 | MIT | deps: none | versions: 362
Reactive, component-oriented view layer for modern web interfaces.
https://github.com/vuejs/vue#readme
keywords: vue
dist
.tarball: https://registry.npmjs.org/vue/-/vue-2.6.14.tgz
.shasum: e51aa5250250d569a3fbad3a8a5a687d6036e235
.integrity: sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
.unpackedSize: 3.0 MB
maintainers:
- posva <posva13#gmail.com>
- yyx990803 <yyx990803#gmail.com>
dist-tags:
beta: 3.2.0-beta.8
csp: 1.0.28-csp
latest: 2.6.14
next: 3.2.23
published 5 months ago by posva <posva13#gmail.com>
Indicating that I still was on Vue 2.6.14.
Does anyone know how to solve this problem.
Well if you check the #latest tag on the versions tab on npm the latest version is really 2.6.14.
To use a Vue 3, you need to use a #next tag instead. But that version is not 100% compatible with 2.x so please check the migration guide before doing so (also lot of tooling is not compatible as well and because JS projects usually involve "a lot" of tooling, migration might be not that simple)
I am trying to use #nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) project.
I can get Storybook to open and to show stories, but the component within the stories are not rendered. For example, if I try and use the example from https://storybook.nuxtjs.org/usage then I see a <link> element in devtools (the name of the Vue component), not a rendered <a> element (the content of the Vue component):
I then switched to trying to use another simple component:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js
But that doesn't work either, you can see an example of that here: https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo (I had trouble getting Storybook to work on Codesandbox).
Vue Storefront Next is based on Nuxt but I had to make a few changes to get Storybook to open:
Update the build section within nuxt.config.js:
babel: {
presets({ envName }) {
return [
[
'#nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
ignore: [/[\/\\]core-js/, /#babel[\/\\]runtime/],
},
install #babel/runtime-corejs3, core-js 3, and ts-node
ts-node was necessary because Vue Storefront Next provides a tsconfig.json file for development of part of the project, and that makes #nuxtjs/storybook module think the project is a Typescript project (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76), but the Vue Storefront project does not use #nuxt/typescript-runtime - I am wondering if this is part of the problem?
You can see the package.json content on Codesandbox: https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
Any clues as to how to fix this issue would be SUPER appreciated, thank you! I've spent the best part of a day on this but I don't know enough about Storybook or Nuxt to be able to debug it myself, unfortunately :(
It turns out that the #nuxtjs/storybook module seems to be dependent on components: true being set in the project's nuxt.config.js file.
This isn't mentioned anywhere in the #nuxtjs/storybook documentation, but I've raised a Github issue to point this out and will raise a PR against the docs if the maintainer agrees.
You can see my thought process behind how I discovered this issue in this Github thread: https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558
I know that a vue component has an ending tag. But in laravel 8.x, I found jet-application-mark without an ending tag like this...
<div class="flex-shrink-0 flex items-center">
<a href="/dashboard">
<jet-application-mark class="block h-9 w-auto" />
</a>
</div>
If you have laravel installed, you will find the full source code here...
resources > js > layouts > AppLayout.vue (line no: 11)
Is it a vue component? of anything else?
It Jetstream from the new Livewire package that replaces Laravel Auth packages:
From the webpage: Laravel Jetstream is a beautifully designed application scaffolding for Laravel. Jetstream provides the perfect starting point for your next Laravel application and includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.
If you need to change the icon you must publish the Jetstream views with this command:
php artisan vendor:publish --tag=jetstream-views
Next, you should customize the SVGs located in the
resources/views/vendor/jetstream/components/application-logo.blade.php,
resources/views/vendor/jetstream/components/authentication-card-logo.blade.php,
and
resources/views/vendor/jetstream/components/application-mark.blade.php
components.
Source: Jetstream Documentation
If you want to learn what is Livewire you can read the docs in https://laravel-livewire.com
I'm using vue as CDN because app is really simple.
at this point when I add the code
<div id="app">
<!-- some code here -->
<form action="/charge" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= stripePublishableKey %>"
data-amount="2500"
data-name="ec-system payment"
data-description="You will pay this money for something!"
data-locale="auto">
</script>
</form>
</div>
This code gives me the error something like below.
Templates should only be responsible for mapping the state to the UI.
Avoid placing tags with side-effects in your templates, such as
, as they will not be parsed
I found some npm library like "vue-stripe" but I don't know how I can use this library when I use vue with cdn not the vue-cli.
In vue, you can not use script tag inside of template.
In your case you could use this library called "vue-stripe-checkout".
This library supports in two ways
NPM or Yarn
npm install vue-stripe-checkout --save
yarn add vue-stripe-checkout
CDN
https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js
You can use second method by including cdn into your app.
Please refer this vue-stripe-checkout for detailed information.
I'm trying to include Bootstrap in my Aurelia CLI project, and the CSS and JS work fine.
The only problem I have is the glyphicons require font files to be loaded.
I use this configuration:
"dependencies": [
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.min.css",
"fonts/glyphicons-halflings-regular.woff2"
]
}
]
But I get an error containing this line:
path: 'C:\Users\randy\Documents\form\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.js'
So even though I include the .woff2 file, Aurelia tries to import the file as a JS file. What can I do to make this work? CSS does work fine.
It looks like this is a bug in the current version of the Aurelia CLI. I've submitted an issue for you here: https://github.com/aurelia/cli/issues/248
Aurelia can't process font files. You must use manual bundle task for it.
Here is similar solution for font-awesome: https://stackoverflow.com/a/39544587/1276632
Here is solution for glyphicons (I used it for bootstrap v4 integration): https://github.com/aurelia/cli/issues/248#issuecomment-250967074
This has been solved, for more information read the Github issue.
This issue can now be solved by adding a copy instruction in the aurelia.json.
aurelia.json - valid if the project was created by aurelia-cli 0.25.0 or greater
Add the following in the build block:
"bundles": [ ... ],
"copyFiles": {
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}
If the project was created by an older CLI version, you will have to create the copy task inside the tasks folder
https://github.com/aurelia/cli/blob/master/lib/resources/tasks/copy-files.js.
After that, call the copy task in the build.js/ts task
https://github.com/aurelia/cli/blob/master/lib/resources/tasks/build.js#L15
* credits to fabioluz for commenting this on github