When i load my page, calendar not working and on my console i have :
jQuery.Deferred exception: FullCalendar is not defined ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (http://admin.test/agenda:279:20)
at mightThrow (http://admin.test/js/admin.js:30047:29)
at process (http://admin.test/js/admin.js:30115:12) undefined
admin.js:30340 Uncaught ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (agenda:279)
at mightThrow (admin.js:30047)
at process (admin.js:30115)
1) I have a laravel project with "AdminLTE 3.0.5".
Package.json :
"devDependencies": {
"#fullcalendar/bootstrap": "^4.4.0",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"admin-lte": "^3.0.5",
"axios": "^0.19",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
2) I import Fullcalendar package with my webpack :
mix.js('resources/js/app.js', 'public/js/app.js')
.js('resources/js/calendar.js', 'public/js/calendar.js')
app.js :
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
require('jquery-ui/ui/widgets/draggable');
require('admin-lte');
/* Table */
require('../../node_modules/admin-lte/plugins/datatables/jquery.dataTables.min.js');
require('../../node_modules/admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/dataTables.responsive.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/bs-custom-file-input/bs-custom-file-input.min.js');
calendar.js :
/* Calendar */
require('#fullcalendar/core');
require('#fullcalendar/daygrid');
require('#fullcalendar/timegrid');
require('#fullcalendar/interaction');
require('#fullcalendar/bootstrap');
3) On my vue, i copy/past the AdminLTE3 calendar page and only add my 2 mix file before :
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/calendar.js') }}"></script>
<script>
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
[...]
I use "require()" function to call all js files, and when i run "npm run dev", everything work, no error.
I think that it's a js file order, but it's the same order than AdminLTE3 calendar page... or i'm blind.
I changed all versions of the calendar package & jquery & jquery-ui to have the same that this page (4.4.0 for my dl version).
Someone can help me pls ?
I have the solution.
Imports files like that on my calendar.js :
/* Calendar */
import { Calendar } from '#fullcalendar/core';
import dayGrid from '#fullcalendar/daygrid';
import timeGrid from '#fullcalendar/timegrid';
import interaction, { Draggable } from '#fullcalendar/interaction';
import bootstrap from '#fullcalendar/bootstrap';
And you dont need this 2 lines on my script
<!--
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
-->
Related
Well i am playing with the new laravel 5.3 and vue.js and i want to do a GET call to some users i have in my DB
Im using components btw.
This is my app.js
require('./bootstrap');
Vue.component('example', require('./components/UserComponents/User.vue'));
const app = new Vue({
el: 'body',
});
This is my component User.vue i left the HTML template out for post size reason i can post it if neccesary
<script>
export default{
data : function () {
return {
users : ''
}
},
methods: {
fetchUser: function () {
var vm = this;
vm.$http.get('user/', function (data) {
vm.$set('users', data)
})
}
},
ready() {
this.fetchUser();
},
}
</script>
Im getting 2 errors in the console
vue-resource.common.js?d39b:27 0ReferenceError: Laravel is not defined(…)
(program):29 Uncaught (in promise) ReferenceError: Laravel is not defined(…)
this is my package.json as you can see i have all the deps for this to work vue and vue resource
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0",
"vue": "^1.0.26",
"vue-resource": "^0.9.3"
}
}
Hope someone could help me out here. Thank you
Or for a cleaner format:
<script>
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
Does same thing as Rocco's answer.
Try to put this on your blade, as you can see is inserted by default on app.blade on Laravel 5.3
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
if you're using axios then ensure the following is in your bootstrap.js file after axios is imported:
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
};
I'm trying to use Font Awesome with Vue + laravel project.
I have it in my package.json
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.4",
"axios": "^0.21.4",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.34",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.3.11",
"resolve-url-loader": "^3.1.4",
"sass": "^1.43.3",
"sass-loader": "^11.0.1",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
},
Imported FontAwesome in main.js
import { library } from '#fortawesome/fontawesome-svg-core'
import { faSpinner } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
I am Use:
<i class="fas fa-ellipsis-v"></i>
But Not Show Icon !!
Read document
https://github.com/FortAwesome/vue-fontawesome
You need add to main.js
Vue.component('font-awesome-icon', FontAwesomeIcon)
and use tag <font-awesome-icon icon="***" />
Example:
<font-awesome-icon icon="ellipsis-v" />
I'm trying to install Vuetify on the latest Laravel versione (8) but I cannot do it. Seems it doesn't work even if the console doesn't show me any error.
That's my resource/plugins/vuetify.js
import Vue from 'vue'
// import Vuetify from 'vuetify'
import Vuetify from 'vuetify/lib'
// import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
My webpack.mix.js :
const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
mix
.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig({
plugins: [
new VuetifyLoaderPlugin()
],
})
.browserSync('tb8.test');
The app.js
import PortalVue from 'portal-vue';
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(vuetify);
const app = document.getElementById('app');
new Vue({
vuetify,
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);
and the welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito';
}
</style>
</head>
<body class="antialiased">
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
#if (Route::has('login'))
<div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
#auth
Dashboard
#else
Login
#if (Route::has('register'))
Register
#endif
#endif
</div>
#endif
<v-app>
<v-main>
Hello World
</v-main>
</v-app>
</div>
</body>
</html>
Can anyone help me to find where is the mistake?
Thank you in advance
Valerio
Fresh Laravel 8.12 + Jetstream + Inertia + VueJs + Vuetify
add to header the string of style in /resources/views/app.blade.php
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
add to /resources/js/app.js
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)
and
vuetify: new Vuetify(), after 'new Vue({' like this:
require('./bootstrap');
import Vue from 'vue';
import Vuetify from 'vuetify';
import { InertiaApp } from '#inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';
import 'vuetify/dist/vuetify.min.css';
Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(Vuetify)
const app = document.getElementById('app');
new Vue({
vuetify: new Vuetify(),
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);
After that, for example, you can create your vuetify component like this:
/resources/js/Components/NavigationDrawers.vue with code from Vuetify labrory
init this vue-component in /resources/js/Pages/Dashboard.vue like
<navigation-drawers/>
with call
import NavigationDrawers from '#/Components/NavigationDrawers'
and
NavigationDrawers
in <script>
Example:
<template>
<app-layout>
<navigation-drawers/>
....
....
</app-layout>
</template>
<script>
import NavigationDrawers from '#/Components/NavigationDrawers'
import AppLayout from '#/Layouts/AppLayout'
import Welcome from '#/Jetstream/Welcome'
export default {
components: {
AppLayout,
Welcome,
NavigationDrawers,
},
}
</script>
It is help you for setting vuetify to your project.
Sass and other config you can config self.
a screenshot example Navigation Drawer
a screenshot example Navigation Drawer two
Currently Vuetify does not work with vue 3, so to install vuetify you have to go with vue 2. to do so:
we can install jetstream 2.1 which comes with vue 2. I have described installation process below:
Youtube video: https://youtu.be/V8_yLfNhg2I
To install laravel
composer create-project laravel/laravel project_name
Now go to composer.json file and inside require:{} add just one line and rest of composer file should be same.
"laravel/jetstream": "2.1",
after adding that "require" section of composer.json would look something like this:
"require": {
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.4",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.40",
"laravel/tinker": "^2.5",
"laravel/jetstream": "2.1",
},
Now run composer update
Now run php artisan jetstream:install inertia
Now run npm install
Now run npm install vuetify
Go to resources/css/app.css and add following
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
#import url('https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css');
#import "vuetify/dist/vuetify.min.css";
Now go to resources/js/app.js and add following code:
require('./bootstrap');
// Import modules...
import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue';
import PortalVue from 'portal-vue';
//add these two line
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
//also add this line
Vue.use(Vuetify);
const app = document.getElementById('app');
new Vue({
//finally add this line
vuetify: new Vuetify(),
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);
Now run npm run dev
At this moment your vuetify will work!
To check whether vuetify with inertia js is working or not please follow:
Go to resources/js/Pages and create new file name test.vue
Add following code to test.vue
<template>
<v-app>
<v-container>
<v-btn>Click Me!</v-btn>
</v-container>
</v-app>
</template>
Now run npm run dev
Now go to route/web.php and add
Route::get('/', function () {
return Inertia::render('test');
});
Now php artisan serve to run in browser. and don't forget to add migrate and add database to .env
Vuetify now has a Vue 3 branch (at the time of writing still in beta) The point about the clash with tailwind still stands although the problem is mostly manifests its self in terms of file size (of the css) Anyway to get things working in an install of Laravel (9) and Jetstream with Inertia you need to add vuetify
npm install vuetify#^3.0.7 --save
Then edit resources/js/app.js
by adding:
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
and in the same file amending the createInertiaApp function set up so that Vue uses Vuetify
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
...
.use(vuetify)
...
},
});
You will then be able to use Vuetify components. You will probably want to set your own colours. There are two options SASS or javascript
here is an example of the Javascript option
const vuetify = createVuetify({
theme: {
themes: {
light: {
dark: false,
colors: {
primary: "#415e96",
secondary: "#b89acc"
}
},
},
},
components,
directives,
}
)
More on this here
Here is an (untested by me) article on removing the collisions between tailwind and Vuetify
I'm trying to build from source Ckeditor 5 with Webpack Encore. I followed the instructions here:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#bundler
But i have a problem with the display of the tool. It looks weird like this (first, when i used the built-in from Ckeditor it was working fine):
I think that the problem is relative to CSS but i don't see what is wrong. My Webpack compiles fine and the console is empty. My package.json looks like this:
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/helper-call-delegate": "^7.8.7",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"#fortawesome/fontawesome-free": "^5.13.0",
"#symfony/webpack-encore": "^0.29.1",
"babel-loader": "^8.1.0",
"bootstrap": "^4.4.1",
"core-js": "^3.0.0",
"jquery": "^3.5.1",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.2",
"sass-loader": "7.0.1",
"webpack-notifier": "^1.6.0",
"#ckeditor/ckeditor5-dev-utils": "^13.0.1",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.2",
"raw-loader": "^3.1.0",
"postcss-loader": "^3.0.0"
"dependencies": {
"#ckeditor/ckeditor5-adapter-ckfinder": "^19.0.0",
"#ckeditor/ckeditor5-autoformat": "^19.0.0",
"#ckeditor/ckeditor5-easy-image": "^19.0.0",
"#ckeditor/ckeditor5-alignment": "^19.0.0",
"#ckeditor/ckeditor5-autosave": "^19.0.0",
"#ckeditor/ckeditor5-basic-styles": "^19.0.0",
"#ckeditor/ckeditor5-block-quote": "^19.0.0",
"#ckeditor/ckeditor5-core": "^19.0.0",
"#ckeditor/ckeditor5-editor-classic": "^19.0.0",
"#ckeditor/ckeditor5-essentials": "^19.0.0",
"#ckeditor/ckeditor5-font": "^19.0.0",
"#ckeditor/ckeditor5-heading": "^19.0.0",
"#ckeditor/ckeditor5-indent": "^19.0.0",
"#ckeditor/ckeditor5-link": "^19.0.0",
"#ckeditor/ckeditor5-list": "^19.0.0",
"#ckeditor/ckeditor5-media-embed": "^19.0.0",
"#ckeditor/ckeditor5-paragraph": "^19.0.0",
"#ckeditor/ckeditor5-paste-from-office": "^19.0.0",
"#ckeditor/ckeditor5-table": "^19.0.0",
"#ckeditor/ckeditor5-theme-lark": "^19.0.0",
"#ckeditor/ckeditor5-typing": "^19.0.0",
"#ckeditor/ckeditor5-image": "^19.0.0",
"bootstrap-datepicker": "^1.9.0",
"dropzone": "^5.7.0",
"leaflet": "^1.6.0",
"leaflet-ajax": "^2.1.0",
"sortablejs": "^1.10.2",
"sweetalert2": "^9.10.12"
}
My webpack.config.js looks like this:
const { styles } = require( '#ckeditor/ckeditor5-dev-utils' );
var Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addEntry('Form', './assets/js/modules/Form.js')
.addEntry('Edit', './assets/js/modules/Edit.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
.copyFiles({
from: './assets/img'})
// Use raw-loader for CKEditor 5 SVG files.
.addRule( {
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
loader: 'raw-loader'
} )
// Configure other image loaders to exclude CKEditor 5 SVG files.
.configureLoaderRule( 'images', loader => {
loader.exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
} )
// Configure PostCSS loader.
.addLoader({
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve('#ckeditor/ckeditor5-theme-lark')
}
} )
} )
I removed CKEditorWebpackPlugin from the webpack file because it was bringing errors in the compilation phase of Webpack, but the problem was already there with it.
My import of CKeditor looks like this:
import ClassicEditorBase from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '#ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '#ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ListPlugin from '#ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [...
I don't see what is wrong... maybe someone can help me? Thank you so much if you any idea to solve this problem.
Have a nice day
Ok, my bad, i found the answer myself. It's something related to my configuration, maybe a mismatch with other plugins (like Sortable or Dropzone) because when i moved the import of Ckeditor to my main app.js it works (it was before in Edit.js)...really weird but now it works.
I try to integrate vue.js with laravel 5.3. I call "gulp" which creates the main.js file in the public folder. I can see in the browser that the js file is loaded but the value of "message" is not shown. It is only written {{message}}. Any ideas why?
<body>
<div class="container">
<div class="content">
<div class="title">
<p>#{{ message }}</p>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
gulpfile:
var elixir = require('laravel-elixir');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');
elixir(mix => {
mix.sass('app.scss').browserify('main.js');
});
main.js:
import Vue from 'vue';
var app = new Vue({
el: 'body',
data: {
message: 'Hello Vue!'
}
})
package.json:
"dependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-vueify": "^1.0.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
EDIT
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch",
"slate": "rimraf node_modules && npm install",
"clean": "rimraf public/css/app.css public/css/app.css.map public/js/app.js && npm run dev"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.1",
"laravel-elixir": "^6.0.0-15",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.3.0",
"laravel-elixir-webpack-official": "^1.0.10",
"lodash": "^4.17.2",
"moment": "^2.17.1",
"vue": "^2.1.6",
"vue-resource": "^1.0.3",
"vuex": "^2.1.1"
}
}
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix
.sass('app.scss')
.webpack('main.js');
});
Your code is fine except one thing. Vue JS Doesn't recommend use of body element as vue js root.
The provided element merely serves as a mounting point. Unlike in Vue
1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to or
https://v2.vuejs.org/v2/api/#el
Code
<body>
<div class="container" id="app"> <!-- Mind the id attached -->
<div class="content">
<div class="title">
<p>#{{ message }}</p>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
and main.js
import Vue from 'vue';
var app = new Vue({
el: '#app', // mind the root element is changed to app.
data: {
return { // mind the return in data
message: 'Hello Vue!'
}
}
});