I am currenty trying to build a Headless CMS.
The frontend uses server side rendering.
In my server.js I want to preprocess SCSS
for all files starting from my entry file App.svelte.
Does Svelte.preprocess work on Component.render()?
Does anyone has an idea?
server.js
..
// this registers .svelte files
require('svelte/register');
const App = require('./App.svelte').default;
{html, css, head} = App.render({
pageData
});
reply.view('index', {
pageData: JSON.stringify(pageData),
STATIC_DIR,
html,
// css should output preprocessed CSS
css: css.code,
head
})
./App.svelte
..
<script>
import Navigation from "./components/Navigation.svelte"
import Page from "./components/Page.svelte"
import Header from "./components/Header.svelte"
import Main from "./components/Main.svelte"
import Footer from "./components/Footer.svelte"
import Spinner from "./components/Spinner.svelte"
export let pageData;
console.log(pageData)
</script>
<Spinner></Spinner>
<h1>Das ist ein <span>Test</span></h1>
<Header>
<Navigation data="{pageData['navigation/main']}"/>
</Header>
<Main>
<Page pageData="{pageData['page']}" />
</Main>
<Footer>
<Navigation data="{pageData['navigation/footer']}"/>
</Footer>
<style lang="scss">
h1{
color: red;
span{color: yellow}
}
</style>
getting the following error:
CompileError [ParseError]: Colon is expected
at error$1 (justpm.de/node_modules/svelte/compiler.js:15501:20)
at Parser$1.error (justpm.de/node_modules/svelte/compiler.js:15600:10)
at Object.read_style [as read] (justpm.de/node_modules/svelte/compiler.js:11864:21)
at tag (justpm.de/node_modules/svelte/compiler.js:14586:34)
at new Parser$1 (justpm.de/node_modules/svelte/compiler.js:15559:22)
at parse$3 (justpm.de/node_modules/svelte/compiler.js:15729:21)
at compile (justpm.de/node_modules/svelte/compiler.js:26607:18)
at Object.require.extensions.<computed> [as .svelte] (justpm.de/node_modules/svelte/register.js:39:28)
at Module.load (internal/modules/cjs/loader.js:983:32)
at Function.Module._load (internal/modules/cjs/loader.js:891:14) {
name: 'ParseError',
code: 'css-syntax-error',
start: { line: 32, column: 12, character: 723 },
end: { line: 32, column: 12, character: 723 },
pos: 723,
Related
I'm trying to fit an image into Vuetify's VBtn component, like this-
<template>
<v-btn>
<img class="img-in-btn" src="#/assets/my-image.png">
</v-btn>
</template>
If I use the v-img and do it like-
<v-img :src="my-img" height="100%" width="100%" />
It still results in a very wide button and a huge image.
My current attempt is to grab VBtn's dimensions directly from Vuetify's stylesheet, and apply it directly to image class selector like this-
<style lang="scss" scoped>
#import '~vuetify/src/components/VBtn/_variables.scss';
.img-in-btn {
height: $btn-sizes;
object-fit: contain;
}
</style>
But this throws an error-
SassError: ("x-small": 20, "small": 28, "default": 36, "large": 44, "x-large": 52) isn't a valid CSS value.
What's the proper way of doing this?
As mentioned in the documentation, $btn-sizes is configured using the map-deep-merge, like this-
map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);
It means $btn-sizes has multiple mapped values that can not be assigned directly to any CSS property and this is why you are getting the error.
Now, to get the default key's value use, map-get function like this-
map-get($btn-sizes, "default")
Here is the complete example-
<style lang="scss" scoped>
#import "~vuetify/src/components/VBtn/_variables.scss";
.img-in-btn {
height: map-get($btn-sizes, "default") + px !important;
}
</style>
I'm not sure what I am missing, everything seems to be set up correctly:
app.js
window.Vue = require('vue');
import CategoriesDataTable from './components/categories/CategoriesDataTable.vue';
const app = new Vue({
el: '#app',
components : {
CategoriesDataTable,
},
});
CategoriesDataTable.vue:
<template>
<section class="table-container">
<table>
<thead></thead>
</table>
</section>
</template>
<script>
export default {
name : 'CategoriesDataTable',
data() {
return {}
}
}
</script>
<style>
</style>
test.blade.php
#extends('master')
#section('title', 'Add Category')
#section('app')
<CategoriesDataTable></CategoriesDataTable>
#endsection
Doubled checked the spelling but still get
app.js:37926 [Vue warn]: Unknown custom element: <categoriesdatatable> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
In your blade template you can try this:
<categories-data-table></categories-data-table>
Then execute npm run watch.
I faced the same problem , in my case i forget command :
Npm run watch
I want to import this library into my laravel project. I have run npm install vue-simple-lightbox and then in my blade template i have this code
#extends('layouts.app')
#section('content')
{{-- some html code --}}
<div class="row">
</div>
<div class="row">
<lightbox id="mylightbox" :images="images" :image_class="'img-responsive img-rounded'" :album_class=" 'my-album-class' " :options="options"></lightbox>
{{-- more html code --}}
</div>
#endsection
<style type="text/css">
.dropdown, .dropdown-menu {
width: 100%;
}
</style>
#section('scripts')
// import the library here?
<script type="text/javascript">
let app = new Vue({
el: '#app',
data() {
return {
images : [
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
title : 'Image 2'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
title : 'Image 3'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
title : ''
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
title : ''
},
],
options : {
closeText : 'X'
}
};
},
mounted() {
},
});
</script>
#endsection
Where should i import the library? I tried to import it into app.js file using this code window.Lightbox = require('vue-simple-lightbox');, but then how do i use it? It seems the blade template have no idea what is 'lightbox'.
I am getting this error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What is the correct way of importing the library and then use it inside the blade template? Thanks!
Extract your js code to a single file, blade templates are not compiled and it wont work if you import it there.
So copy everything over to say, app.js, then include it via a script tag
Inside app.js you can import lightbox from 'vue-simple-lightbox'
Now, make sure you add it to your webpack.mix file through
.js('path/to/app.js', 'public/js/app.js')
That way the library will get compiled into the asset.
Now, regarding the VUE tempalte not finding the lightbox component.
You forgot to add the component part of the Vue instance:
import Lightbox from 'vue-simple-lightbox'
export default {
components: {
Lightbox //HERE
},
...
You can import the file directly from GitHub:
<script src="https://github.com/vrajroham/vue-simple-lightbox/blob/master/dist/vue-simple-lightbox.js"></script>
I use this library https://github.com/laravue/laravue,
but when I run it to my local it displays error:
Uncaught DOMException: Failed to execute 'createElement' on
'Document': The tag name provided ('{{laravue.currentview }}') is not
a valid name.
here's my app.blade.php:
<div class="container" id="app">
<div class="content">
<component is="#{{laravue.currentView }}" v-bind:app="laravue.app" keep-alive></component>
</div>
</div>
<script defer="defer" src="/js/bundle.js"></script>
my App.js
var Vue = require('vue')
// Vue.use(require('vue-resource'))
// Vue.use(require('vue-validator'))
// Vue.use(requrie('vue-router'))
Vue.config.debug = true // Comment this line for production
new Vue({
el: '#app',
created: function() {
this.laravue.init.call(this, ['home']);
},
data: {
laravue: require('./laravue.coffee')
},
components: require('./components.coffee') // You can just inline them, but I recommend putting them in their own file
})
components.coffee:
module.exports =
# Custom Elements
'titles': require './components/title.coffee'
'random-quote': require './components/random-quote.coffee'
# Views
'home-view': require './views/home.coffee'
home.coffee:
module.exports =
ready: () -> require('../view-ready.coffee').call(this)
props: ['app']
template: require('./home.template.html')
and here's my home.template.html:
<title>Laravue {{app.laravue.version }}</title>
<random-quote></random-quote>
It seems for some reason binding via is="{{laravue.currentView }}"
is being deprecated by vue JS. You will need to change your code from
<component is="#{{laravue.currentView }}" v-bind:app="laravue.app" keep-alive></component>
to
<component v-bind:is="laravue.currentView" v-bind:app="laravue.app" keep-alive></component>
You can find that here called Dynamic Components
:D
I'm starting to play around with vue.js on top of the laravel framework.
But im having trouble with rendering of a component which is imported.
My app.js (main entry point)
// app.js
var Vue = require('vue');
var Router = require('vue-router');
Vue.use(Router);
var router = new Router();
var ContractsOverview = Vue.extend({
template: '<p>contract page</p>'
});
var ContractDetail = Vue.extend({
template: '<p>detail page</p>'
});
import DashboardView from './app/components/DashboardView.vue';
router.map({
'/dashboard': {
component: DashboardView
},
'/contracts': {
component: ContractsOverview
},
'/contracts/:id': {
component: ContractDetail
}
});
var App = Vue.extend({
});
router.redirect({
'*': '/dashboard'
});
router.start(App, '#reminder-app');
This is my Dashboard component
(located at resources/assets/js/app/components/DashboardView.vue)
<template>
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- .. some html -->
</section>
</template>
<script>
export default {}
</script>
and in my master layout i have a normal blade template with the <router-view></router-view> tag at one point.
At the end i build my app.js with laravels elixir and the following gulpfile:
var elixir = require('laravel-elixir');
elixir.config.js.browserify.transformers.push({
name: 'vueify',
options: {}
});
elixir(function(mix) {
mix.less(['bootstrap.less', 'app.less']);
mix.scripts([
'admin-lte/plugins/jQuery/jQuery-2.1.4.min.js',
'admin-lte/plugins/jQueryUI/jquery-ui-1.10.3.min.js',
// some more scripts,
'admin-lte/app.js',
'admin-lte/pages/dashboard.js',
'admin-lte/demo.js'
], 'public/js/ui.js');
mix.browserify('app.js');
});
When i go to the page the routes /contracts and contracts/:id the templates are shown as expected.
But when i go the /dashboard route, i dont see anything (besides the layout).
Am I missing something? Did I forget to import or require something?
Ok, i spent at least 4 hours finding my error, but it was just a simple typo somewhere.
But if you run gulp inside the virtual machine (homestead), you dont get the same output as if you run gulp locally. On my local machine it told what went wrong.
Also gulp watch doesn't work on the homestead machine.