I am trying to use Vuex inside my application. I have just a single note, I cannot do a transpilation on my vue components, so I load them using the following script:
<script src="https://unpkg.com/http-vue-loader"></script>
and I am declaring them as
new window.Vue({
el: '#app',
store: // what I am trying to to
components: {
'fiche-form-content': window.httpVueLoader('/gestion/vue/composants/article-site-form.vue'),
'fiche-list': window.httpVueLoader('/gestion/vue/composants/article-site-list.vue')
},
})
Is it possible to call Vuex through a CDN, write it as a regular Vue store application and inject it without transpilation ? I am new to not using the Vue-cli or webpack on my apps and having no build, so if some one have a better understanding than me I would be happy you share your knowledges. thks
Related
I am currently using vue.js for projects (not vue cli). I wrote all the functions in the same js file. I want to split these functions into several files according to their types. The js files are then imported into vue.js. Is there any way to do it? If I can’t, how can I change it to make this file easier to maintain in the future?
//I would like to import funtion from cart.js. Could I use the below method?
import shopping_cart from '/shopping_cart.js';
new Vue({
el: '#index',
data: {
message: 'test',
},
methods: {
functionA(value) {
//call function from shopping_cart.js
}
}
})
I'm attempting to import apexcharts into my nuxt project. I've used both the vanilla lib and vue wrapper.
Simply importing the library causes the following error
Like I said, i've attempted importing both
import ApexCharts from "apexcharts"
and
import VueApexCharts from "vue-apexcharts"
Both return the same error.
Is this something I have to configure in the nuxt.config.js file?
This is because you are using Nuxt.js which does SSR for you. Since document does not exist on the server-side it will break.
To work around it there a couple of approaches:
First you can create a plugin/apex.js which is responsible for registering your components
import Vue from 'vue';
import ApexChart from 'vue-apexcharts';
Vue.component('ApexChart', ApexChart);
and in your nuxt.config.js make sure to load the plugin file on the client-side:
module.exports = {
// ...
plugins: [
// ...
{ src: '~/plugins/charts', ssr: false }
],
// ....
};
Now you can reference the ApexChart component anywhere in your app, also make sure to wrap it with ClientOnly component to prevent Nuxt from attempting to render it on the server-side:
<ClientOnly>
<ApexChart type="donut" :options="chartData.options" :series="chartData.series" />
</ClientOnly>
The other approach is you can import Apex charts as async components, which do not get rendered on the server-side, but it has been a hit and miss with this approach, feel free to experiment.
Generally when using Nuxt or any SSR solution, be careful of the libraries you use as they might have an implicit dependency on the execution environment, like requiring browser-specific APIs in order to work like window or document.
I want to use VueJS with .NET Core Razor pages.
boot.ts
import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: require('./components/home/home.vue.html') },
{ path: '/counter', component: require('./components/counter/counter.vue.html') },
{ path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.cshtml') }
];
new Vue({
el: '#app-root',
router: new VueRouter({ mode: 'history', routes: routes }),
render: h => h(require('./components/app/app.vue.html'))
});
Notice the fetchdata.vue.cshtml in the code above. When I run the application, I get the following error:
ERROR in ./ClientApp/components/fetchdata/fetchdata.vue.cshtml
Module parse failed: .\NetCoreVueJs\ClientApp\components\fetchdata\fetchdata.vue.cshtml Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div>
| <h1>Weather forecast</h1>
# ./ClientApp/boot.ts 9:37-91
# multi event-source-polyfill webpack-hot-middleware/client?
path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts
Is it possible to use .cshtml files as components in VueJS?
Yes, you can use Vue in your razor pages, but I think you're approaching it in the wrong way. Remember that the .cshtml files are compiled in the backend side into html markup that is sent to the browser.
If you want to use razor views you will have to mount your VueJS code on the HTML that is generated and sent to the browser. See [his example I created on Codepen to illustrate this, I'm using Pug to mimic something that generates the HTML template and once it is generated I mount Vue JS on it. https://codepen.io/jaireina/pen/MNvvgd
Pug
#app
input(type="text", placeholder="type your name", v-model="name")
each val in [1,2,3]
p.name {{name}}
JS
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
You won't be able to use Vue in the way you're trying, as a single page application and passing it the cshtml files as templates. If you really need to use razor views you can do something to what I mentioned before. But if you want to create a SPA, I would recommend creating an API with .NET and having your Vue app consuming that API.
I hope this helps.
I'm trying to add CloudKit JS to a new Vue project. Ideally I'd be able to access CloudKit's functions from any component in my app. I'm brand new to Vue, so please go easy on me. :)
So far, I've tried putting the following in main.js:
var fetch = require('node-fetch')
var CloudKit = require("./cloudkit.js")
CloudKit.configure({
services: {
fetch: fetch
},
containers: [{
containerIdentifier: '...',
apiToken: '...',
environment: 'development'
}]
})
That gives me a script error in cloudkit.js:
TypeError: Cannot read property 'ArrayBuffer' of undefined
So then I read this SO post and tried this in App.vue:
export default {
name: 'App',
components: {
'master': Master
},
mounted() {
let CloudKit = document.createElement('script')
CloudKit.setAttribute('src', 'https://cdn.apple-cloudkit.com/ck/2/cloudkit.js')
document.head.appendChild(CloudKit)
}
}
I'm then able to configure CloudKit and use it inside App.vue, but I'm unclear on how to make CloudKit available in all my components without redefining it as I've done in the mounted() function above.
How can I import CloudKit and make it available in my Vue app globally?
I might be over-simplifying things, but I tried adding:
<script src="https://cdn.apple-cloudkit.com/ck/2/cloudkit.js"></script>
...to the index.html file in my Vue project, and it seems to work great. The CloudKit object is available in all of my components. ¯\_(ツ)_/¯
Your can add a new global property in vue as well :
Import CloudKit as you did then add this in your main.js : Vue.prototype.$CloudKit = CloudKit
Now, Cloudkit is available in your project with this.$CloudKit
More info here
PS: you may configure cloudkit in mounted in the app
As per this answer, I'm trying to set Vue.config.delimiters = ['${', '}'] in order to use Vue with server-side handlebars.
When I just use the global config, it doesn't anything.
When I set delimiters on new Vues, it works
var game = new Vue({
delimiters: ['${', '}'],
...
How can I make it work in one global place i.e. Vue.config.delimiter?
Global delimiters were removed in Vue 2, so you now have to set them on the Vue instance. From the Vue Github page:
...in 2.0 delimiters will become a component-level option, which means you only need to set it for the root instance that relies on in-DOM templates. Any components processed by vueify or vue-loader can just keep using default delimiters.
The change is intended to make it easier to use 3rd party components, since changing the delimiters globally means you will not be able to compile them correctly.
Just to add a bit more context to #craig_h's answer; i've had to use the Vue build with browser templates instead of .vue files so had to work with this.
I was initially adding it :
new Vue({
store: store,
el: el,
delimiters: ['${', '}'],
})
And this wasn't working, but when i added it to:
Vue.component('name-line', {
template: '#js-LineTemplate',
delimiters: ['${', '}'],
...
It worked, this may be useful for someone who has run in to this issue