aurelia publishing and installing components via jspm and github - aurelia

I am trying to figure out how to publish and install components for aurelia via jspm and github.
I have a test component at:
https://github.com/caperavensoftware/pragma-tabsheet
I created a new project and install this component via jspm as:
jspm install pragma-tabsheet=github:caperavensoftware/pragma-tabsheet
in my welcome view I require and use it
<template>
<require from="pragma-tabsheet"></require>
<h1>Welcome</h1>
<pragma-tab-sheet>
<div id="tab1" data-tab="Tab 1"><h2>Tab 1</h2></div>
<div id="tab2" data-tab="Tab 2"><h2>Tab 2</h2></div>
<div id="tab3" data-tab="Tab 3"><h2>Tab 3</h2></div>
</pragma-tab-sheet>
</template>
But when running it i get a error where the controls template is not being loaded from the right path.
GET http://localhost:8080/jspm_packages/github/caperavensoftware/pragma-tabsheet#master.html 404 (Not Found)
Looking a the networks tab in chrome debugging the javascript files are loading correctly but the aurelia template is not.
Any ideas on what I am doing wrong here?
I also tried adding it as a plugin:
export function configure(aurelia) {
return new Promise((resolve) => {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('pragma-tabsheet');
aurelia.start().then(() => {
aurelia.setRoot();
resolve();
});
});
}
but that did not resolve the problem.

Related

Vue3 use component from node_modules

I'm trying to use a component from a node module I installed in Vue3, but it won't work.
I used:
npm install --save vue-slick-carousel
my component
<template>
<div>
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
</div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
export default {
name: 'MyComponent',
components: {
VueSlickCarousel
}
}
</script>
It seems like components from the node_modules folder won't work in general, because I have tryed to use an other library. My own components from the src/components folder work perfectly.
I also tryed to register the component globally in my main.js file, but it also won't work.
In my browsers console I always get this error:
Uncaught TypeError: this.$scopedSlots is undefined
Can anyone help?

How to make Vue 3 application without CLI / Webpack / Node

I am trying to make Vue 3 application but without CLI and Webpack.
There is no official documentation yet. On CDN are many versions (vue.cjs.js, vue.cjs.prod.js, vue.esm-browser.js, vue.esm-bundler.js, vue.global.js, vue.runtime.global.js...).
Which one to pick? And how to mount application, old way does not work. There are many online examples how works new Composition API but none how to start project without CLI / Webpack.
Link to Vue 3 CDN:
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
In body:
<div id="app">
</div>
<script type="module">
import app from './app.js'
const {createApp} = Vue;
createApp(app).mount('#app');
</script>
In app.js is simple component:
export default {
name: 'Test',
setup() {
const title = "Hello";
return {
title
};
},
template: `
<div>
<h1>{{title}}</h1>
</div>
`,
};
Instead of one component, app.js can be a container for other components.
I made simple Vue 3 QuickStart template so anyone can see how this works.
Template is in SPA-like style and contains 4 sample pages, 4 components, routing and store. It uses only Vue.js from CDN, everything else is hand made ;)
Note: This is not library, it's just demo code so anyone can see how to mount Vue 3 application and use Composition API in simple scenario.
Online demo: http://vue3quickstart.rf.gd/
GitHub: https://github.com/SaleCar/Vue3-QuickStart
Found in docs: https://vuejs.org/guide/quick-start.html#without-build-tools
Without Build Tools
To get started with Vue without a build step, simply copy the following code into an HTML file and open it in your browser:
<script src="https://unpkg.com/vue#3"></script>
<div id="app">{{ message }}</div>
<script>
Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
The above example uses the global build of Vue where all APIs are exposed under the global Vue variable.
While the global build works, we will be primarily using ES modules syntax throughout the rest of the documentation for consistency. In order to use Vue over native ES modules, use the following HTML instead:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
Notice how we can import directly from 'vue' in our code - this is made possible by the <script type="importmap"> block, leveraging a native browser feature called Import Maps. Import maps are currently only available in Chromium-based browsers, so we recommend using Chrome or Edge during the learning process. If your preferred browser does not support import maps yet, you can polyfill it with es-module-shims.
You can add entries for other dependencies to the import map - just make sure they point to the ES modules version of the library you intend to use.
Not for production
The import-maps-based setup is meant for learning only - if you intend to use Vue without build tools in production, make sure to check out the Production Deployment Guide.
In addition, as Evan You recommended, Vite(https://madewithvuejs.com/vite) is a good alternative to #vue/cli and webpack. It's still CLI like but more lightweight I think. Fast and supports SFC.

How to embed LinkedIn Profile in VueJs Component

I am using VueJS to build a website and I got to the point where I want to include my embedded profile into a page/Component in Vue. It seems to work only if I refresh the page. When I navigate from other pages to this page it is not displayed.
In my public/index.html I included LinkedIn Library Script
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
In my component:
<template>
<!-- some other code -->
<div class="col-md-4 col-sm-12 text-sm-center">
<div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="vertical" data-theme="dark" data-vanity="nicolae-orlov">
</div>
</div>
</template>
I saw some info that I need to reload the component to force it to re-render but I am not sure how. Any help is much appreciated.
If you want to add a script tag only on a specific component, you can use PostScribe to render a script after load.
After installing (npm i postscribe --save) and importing (import postscribe from 'postscribe'), you can add your script tag in the mounted lifecycle hook:
mounted() {
postscribe('#linkedin', '<script src="https://platform.linkedin.com/badges/js/profile.js"><\/script>')
}
where #linkedin refers to the ID of your profile badge element (add an ID if necessary)
Your linkedin badge should now be embedded in your Vue component.
You can add the javascript by injecting script into head and then adding the html into the respective component. This is how you can inject javascript directly into head from the component.
<script>
export default {
head(){
return{
script : [
{
src:
'https://platform.linkedin.com/badges/js/profile.js',
type:
'text/javascript'
}
],
}
}
}
</script>

Shoud I load Vue JS manually in laravel?

I have added some Vue Code in a view in a Laravel project. Do I need to include the vuejs in the layout like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
Or laravel takes care of it in someway.
What I have tried:
I ran npm install and npm run dev and I have now app.js and app.css in the public directory.
and I have the following in the view:
const app = new Vue({
el: '#app',
data: {
comments: {},
post: {!! $post->toJson() !!},
user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!},
comment: 'Your Comment'
},
mounted(){
this.getComments();
},
methods:{
getComments(){
//Some code here
}
}
});
But when I access this view I get:
ReferenceError: Vue is not defined
1- You should add your script in your index file
2- then add that vue codes in the app.js file in the resources\js\app.js
Run npm prod to compile the vue file and add it at the end of the body tag where you want it to use.
How Vue.js is used in laravel
when we run npm install it will download all packages to node_modules directory that are mentioned in the webpack.mix.js.
Then we add required plugins in resources/js/app.js.
In resources/js/app.js we initialize vue.js using
new Vue(
el:'#id_of_the_element'
})
Then we run npm run prod to compile the minified version of vue.js and place it public/js/app.js now it can be added where required
<html>
<body>
<div id="id_of_the_element">
//....
</div>
//import your app.js here
<script src="/js/app.js">
</body>
</html>

Trying to get Kendo UI wrappers working in Nuxt

There is a basic tutorial for getting Nuxt going here:
https://github.com/nuxt-community/starter-template . I like all the stuff that Nuxt puts in place ; structure etc.
Next is installing the Kendo stuff from here:
https://www.telerik.com/kendo-vue-ui/getting-started/
npm install --save #progress/kendo-ui
npm install --save #progress/kendo-theme-default
npm install --save #progress/kendo-dateinputs-vue-wrapper
I have tried to put the steps into the index.vue page
( have removed the styles from the bottom just to make it less code )
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
vtest2
</h1>
<h2 class="subtitle">
Nuxt.js project
</h2>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
class="button--green">Documentation</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
class="button--grey">GitHub</a>
</div>
<kendo-calendar :value="new Date()"></kendo-calendar>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import '#progress/kendo-ui'
import '#progress/kendo-theme-default/dist/all.css'
import { Calendar } from '#progress/kendo-dateinputs-vue-wrapper'
export default {
components: {
AppLogo,
Calendar
}
}
</script>
<style>
</style>
When I run npm run dev , it compiles but when I open the page I get:
ReferenceError
window is not defined node_modules\#progress\kendo-ui\js\kendo.core.js
});
return observable;
};
})(jQuery, window);
return window.kendo;
}, __webpack_require__(3));
what am I doing wrong?
Kendo for Vue does not support Server Side Rendering, but you can create a plugin and then in the nuxt.config.js file you must add it in client mode.
see the example.
/plugins/kendoui.js
import Vue from 'vue'
import '#progress/kendo-ui'
import '#progress/kendo-theme-default/dist/all.css'
import {
KendoGrid,
KendoGridInstaller,
KendoGridColumn
} from '#progress/kendo-grid-vue-wrapper'
import {
KendoDataSource,
KendoDataSourceInstaller
} from '#progress/kendo-datasource-vue-wrapper'
Vue.use(KendoGridInstaller)
Vue.use(KendoDataSourceInstaller)
nuxt.config.js
plugins: [{
src: '~/plugins/kendoui.js',
mode: 'client'
}],
and that's works for me.
Kendo for Vue does not support Server Side Rendering and Nuxt because it needs the window object.