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>
Related
I have a Vue.js app that I created with Vite. This app successfully runs when I use npm run dev and visit the app in the browser. Now, I'm trying to bundle the app as a single code file so that I can use it as a plugin for Figma.
I know that the index.html page loads because I can edit the HTML and see the changes. However, the page isn't loading/running the Vue.js app itself. I can see the following warning in the console log:
<link rel=modulepreload> has no 'href' value
My project is structured like this:
/
/dist
/assets
index.a386f87b.css
index.dc441194.js
vendor.fbe8b50a.js
index.html
manifest.json
plugin.js
/src
/views
Index.vue
Items.vue
Calendar.vue
/res
/css
theme.css
/images
loading.gif
splash.jpeg
App.vue
main.js
index.html
When I look at the index.html file in the dist directory, I see:
<script type="module" crossorigin src="/assets/index.dc441194.js"></script>
<link rel="modulepreload" href="/assets/vendor.fbe8b50a.js">
<link rel="stylesheet" href="/assets/index.a386f87b.css">
<div id="app" class="position-absolute top-0 left-0 vh-100 vw-100"></div>
The references look correct. However, clearly something is wrong as the app is not loading as a plugin in Figma. Once again, I know I'm successfully loading the index.html file because if I manually edit it, the changes appear in the plugin. This leads me to bundling the app as a single code file. At this point, I'm stuck though. I don't see a way to accomplish this via Vite's built-in capabilities. I tried including the vite-plugin-singlefile plugin. Unfortunately that didn't work for me either. Currently, my vite.config.js file looks like this:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue';
export default defineConfig(({command, mode }) => {
return {
assetsDir: 'res',
plugins: [
vue(),
],
root: 'src',
build: {
emptyOutDir: true,
outDir: '../dist'
}
}
});
What am I doing wrong?
Figma ignores <script>.src and <link>.href, which aligns with the docs you linked, stating "all the code must be in one file".
Using vite-plugin-singlefile (as you mentioned) to inline all scripts and styles in index.html indeed seems to workaround the problem:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), viteSingleFile()],
build: {
cssCodeSplit: false,
assetsInlineLimit: 100000000,
rollupOptions: {
output: {
manualChunks: () => "everything.js",
},
},
}
})
demo
I have below 2 components in vue.js and using in Laravel 5.8
Here is app.js file.
require('./bootstrap');
import VeeValidate from 'vee-validate';
window.Vue = require('vue');
Vue.use(VeeValidate);
Vue.component('profile', require('./components/Account/Profile.vue').default);
Vue.component('change-password', require('./components/Account/changepassword.vue'));
const app = new Vue({
el: '#app'
});
Below is the code in change password component.
<template>
<div>
</div>
</template>
When I build the code using npm run dev.
I get the below error: Failed to mount component: template or render
function not defined in <ChangePassword> <Root>
When I remove the change component reference from app.js and re build using npm run dev then everthing work.
Am I missing anything?
First your change password component is empty and then there is no export default script that exports your component for use
It worked with this Vue.component('change-password', require('./components/Account/changepassword.vue').default);
Instead of this:
Vue.component('change-password', require('./components/Account/changepassword.vue'));
I am experimenting with Vue and would like to develop a node app with my usual setup which uses budo(browserify + watchify).
./index.html:
<div id="app">
{{ message }}
</div>
<!-- ===================== JavaScript Files Below This Line =============== -->
<script src="index.js"></script>
and ./src/js/main.js
const Vue = require('vue');
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
module.exports = app;
with ./index.js
// js includes
require('./src/js/main');
I cant see the message on the page. I see index.js in the console with main.js injected into it. When I use the Vue CDN with the vue code in index.html that works ok. I was hoping someone could shed some light on how one uses CommonJS modules to import vue code into their app when bundling w/browserify. Thanks in advance...
As explained here Vue.js not rendering you need to add this to your
package.json file:
"browser": {
"vue": "vue/dist/vue.common.js"
}
Below is my index.html file
<!doctype html>
<html><head>
<body>
<h1>ES</h1>
<div id="app">
{{ message }}
</div>
<script src="dist/main.js" type="text/javascript"></script></head>
</body>
</html>
I am trying to use basic vue.js declarative rendering. My index.js input for webpack with zero configuration is below
import Vue from 'vue';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
The value of message is not shown in the page . Is this something to do with my webpack configuration. Do I need to use Babel transpiler to get this to work?
See Explanation of Different Builds in the doc.
The default file for these bundlers (pkg.module) is the Runtime only
ES Module build (vue.runtime.esm.js).
Vue build with runtime only doesn't include HTML template compiler, which you need in your case. (Runtime only build is 30% smaller in size)
As the doc mentioned, to import full build of Vue, you may use
import Vue from 'vue/dist/vue.esm.js';
Btw, I highly recommend you to use vue-cli instead of configuring the Vue project yourself.
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.